jQuery 대화 상자 ESC 키 이벤트를 차단하는 방법?

모달 jquery 대화 상자와 대화 상자 뒤에 ESC 키 이벤트를 사용하는 다른 요소가 있습니다. jQuery Dialog가 작동 중일 때이 ESC 키 이벤트가 전파되는 것을 원하지 않습니다. 이제 ESC를 클릭하면 대화 상자가 닫히고 백그라운드 요소에서 ESC 이벤트 핸들러가 트리거됩니다.jQuery 대화 상자 ESC 키 이벤트를 차단하는 방법?

jQuery 대화 상자를 닫을 때 어떻게 ESC 키 이벤트를 먹습니까?

출처

2012-05-05 louis.luo

내부적으로 jQuery를 UI의 대화의 closeOnEscape 옵션은 문서 자체에를 keyDown 수신기를 부착하여 구현된다 . 따라서 keydown 이벤트가 최상위 레벨로 끝나면 대화 상자가 닫힙니다.

이스케이프 키를 계속 사용하여 대화 상자를 닫고 부모 노드로 이스케이프 키를 전파하지 않으려면 closeOnEscape 기능을 직접 구현해야합니다. 이벤트 개체에 대한 stopPropagation 메서드 (MDN article on event.stopPropagation 참조)

(function() { 
    var dialog = $('whatever-selector-you-need') 
    .dialog() 
    .on('keydown', function(evt) { 
     if (evt.keyCode === $.ui.keyCode.ESCAPE) { 
      dialog.dialog('close'); 
     }     
     evt.stopPropagation(); 
    }); 
}());

대화 내에서 발생하는 모든 keydown 이벤트를 수신합니다. 눌려진 키가 이스케이프 키라면 대화 상자를 정상적으로 닫고 evt.stopPropagation 호출이 keydown이 상위 노드까지 버블 링하지 않도록합니다.

여기에 이것을 보여주는 라이브 예가 있습니다 (http://jsfiddle.net/ud9KL/2/).

출처

2012-05-06 12:38:06

감사합니다. 이 작동합니다. –

이 작동하지 않는다, keydown 함수 안에 jsfiddle 간단한 경고를 추가하고 절대로 호출됩니다. ( – Yasser

불행히도 closeOnEscape 나를 위해 작동하지 않습니다. 그러나이 바인딩은 속임수를했습니다. –

대화 상자가 열려 있는지 그리고 이스케이프 키를 누른 상태인지 확인하고 해당 상황을 무시하려면 대화 상자 뒤의 요소에 대한 코드를 수정해야합니다. 당신은 closeOnEscape 필요

출처

2012-05-05 23:14:50 j08691

감사를 사용할 수 있습니다. 하지만 문제는 ESC를 누르면 이벤트가 먼저 대화 상자로 이동하고 대화 상자를 닫는 것입니다. 그런 다음에야 내 배경 요소로 이동하며,이 시점에서 대화 상자가 없으며 ESC 이벤트를 수행하게됩니다. –

대화 상자가 열려있을 때 백그라운드 요소에서 수신기를 제거한 다음 대화 상자가 닫힌 후에 다시 연결하는 것은 어떻습니까? – j08691

나는 그것이 효과가있을 것이라고 생각하지만 조금 해킹되지 않을까? 그것을하기에 덜 해킹 방법이있을 것입니까? –

...

예제 코드 :

$(function() { 
$("#popup").dialog({ 
height: 200, 
width: 400, 
resizable: false, 
autoOpen: true, 
modal: true, 
closeOnEscape: false 
}); 
});

라이브를 참조하십시오 http://jsfiddle.net/vutdV/

출처

2012-05-05 23:27:16 andyderuyter

그는 대화 상자가 열리지 않으면 대화 상자가 닫히지 않길 원한다고 말하지 않았고, 대화 상자가 열려 있으면 이스케이프가 대화 상자를 무시하는 것을 듣는 다른 요소를 원하지 않는다고 말했습니다. 당신의 방법은 탈출 키를 눌러 대화 상자를 닫을 수있는 기능을 제거합니다. – j08691

거기에 요점이 있습니다. 스타일 태그를 편집 했으므로 "닫기"링크를 사용할 수 있습니다. http://jsfiddle.net/vutdV/1/ 실제로 최종 해결책은 아직 없습니다. – andyderuyter

당신은 대답에 대해 다음

$(document).keyup(function (e) { 
     if (e.keyCode == 27) { 

      $('#YourDialogID').dialog('close') 
     } 
    });

출처

2013-11-18 11:30:16 Adel

jQuery 대화 상자 ESC 키 이벤트를 차단하는 방법?

답변

관련 문제