자바 스크립트 이벤트 트리거

Ajax 지원 웹 폼을 만들고 간단한 페이지를 만들려고합니다. 이 페이지에는 편집하고자하는 값이 들어있는 div가 있습니다.자바 스크립트 이벤트 트리거

div의 내용을 텍스트 입력 상자에 추가하려면 작업 JavaScript가 있습니다. 웹 서버에 다시 게시하려면 저장 단추가 있지만 example과 달리 나는 원하지 않습니다. 취소 버튼 대신 커서를 놓는 입력 상자가 취소 작업을 시작하도록합니다.

텍스트 입력란에 onblur 이벤트를 추가하여 편집 작업을 취소하고 원래의 편집되지 않은 상태로 되돌릴 수 있습니다 (변경 사항 저장 안함).

내가 가지고있는 문제는 '저장'버튼을 클릭하면 텍스트 입력 상자의 onblur 이벤트도 실행된다는 것입니다. 어떻게 이런 일을 막을 수 있습니까?

function edit(obj) 
{ 
    Element.hide(obj); 
    var textarea = '<div id="'+obj.id+'_editor"><div class="fieldvalueedit"><input type="text" id="'+obj.id+'_edit" name="'+obj.id+'" rows="1" size="64" value="'+obj.innerHTML+'"></div>'; 
    var button = '<div class="fieldvaluebuttons"><input id="'+obj.id+'_save" type="button" value="Save"/></div></div>'; 

    new Insertion.After(obj, textarea+button); 
    document.getElementById(obj.id+'_edit').focus(); 
    Event.observe(obj.id+'_save', 'click', function(){saveChanges(obj)}, false); 
    Event.observe(obj.id+'_edit', 'blur', function(){cleanUp(obj)}, false); 
}

출처

2012-02-11 Bryan

다른 요소를 클릭하면 요소에 필연적으로 포커스가 사라지기 때문에 멈출 수 없습니다. 실제로 흐리게 처리 한 후 몇 밀리 초 동안 실행되는 제한 시간 내에 "흐림"활동을 래핑하는 것이 효과적 일 수 있습니다. 그런 다음 제출 단추의 핸들러를 사용하여 흐림 처리기에서 확인할 플래그를 설정할 수 있습니다. – Pointy

[Prototype.js] (http://www.prototypejs.org) JavaScript 프레임 워크와 모양이 비슷합니다. 나는 [prototypejs] 태그가 '웹 개발'보다 더 유용하다고 믿는다. –

@RobW 실제로 prototype.js입니다. 태그를 업데이트하여 고맙습니다. 감사합니다. – Bryan

대신 당신이 재설정 문서 상에 onclick 이벤트를 등록 할 수 있습니다 입력상의 위해 onblur 이벤트를 사용하여 다음과 같이

편집 기능 (사용자가 편집 할 수있는 텍스트를 클릭 할 때 호출)입니다 텍스트 영역 상태를 저장 한 다음 저장 버튼을 클릭하면이 이벤트의 전파를 취소합니다 (텍스트 영역에도 적용하려는 경우).

Event.observe(obj.id+'_save', 'click', function(e){ 
    e.stopPropagation(); 
    saveChanges(obj); 
}, false); 
Event.observe(document, 'click', function(){cleanUp(obj)}, false);

출처

2012-02-11 15:47:24

자바 스크립트 이벤트 트리거

답변

관련 문제