JQuery 이벤트를 한 번만 실행하도록 바인딩하려면 어떻게해야합니까?

Question

어딘가 다른 곳을 클릭 할 때 닫으려는 도움말 팝업이 있습니다.

$('.help[data-info]').click(function(){ 
    $('.info[a complicated selector]').toggle(400); 
    $('*:not(.info[the complicated selector]).one('click','',function(){ 
    .info[the complicated selector].hide(400); 
    }); 
}) 

그러나 하나가() 나는 그것이 페이지의 각 요소에 대해 발사하기 전에 원하는되지 않습니다 : 여기에 내가 가진거야. 한 번만 발사하면 돼. 당신은 단지 모든 요소에 걸쳐 한 번에 발사 할 경우

Answer 1

도움말 팝업을 제외하고 DOM의 모든 요소에 이벤트 처리기를 연결 한 것처럼 보입니까? 흠 ...

이 방법에 대해 :

전체 화면을 오버레이하지만 투명 (불투명도 : 0.0) 단일 "마스크"DIV를 작성합니다. 클릭 이벤트 핸들러 만 해당 마스크 div에을 첨부하십시오. 그런 다음 오버레이 div 상단에 정보 div를 엽니 다. 정보 div가 아닌 페이지의 아무 곳이나 클릭하면 마스크 div가 이벤트를 캡처하기 전에 해당 이벤트가 캡처됩니다. 이벤트 핸들러에서 info div를 hide()하고 마스크 div를 모두 제거하십시오. 이것을 테스트하거나 실험하는 동안, 완전히 투명하지는 않지만 부분적으로 불투명 한 마스크로 시작하십시오.

Answer 2

, 당신은 어느 하나를 클릭 할 때 수동으로 모든 이벤트 처리기를 바인딩을 해제해야 또는 플래그 사용할 수 있습니다 : 부울 변수의

$('.help[data-info]').click(function(){ 
    $('.info[a complicated selector]').toggle(400); 
    var sel = $('*:not(.info[the complicated selector]); 
    function hideInfo() { 
    .info[the complicated selector].hide(400); 
    sel.unbind('click', hideInfo); 
    } 
    sel.bind('click', hideInfo); 
}) 

Answer 3

만들기 사용 먼저 클릭 한 후 true로 설정, 그래서 다시 작업을 트리거하지 않습니다

$('.help[data-info]').click(function() { 
    var clicked = false; 
    $('.info[a complicated selector]').toggle(400); 
    $('*:not(.info[the complicated selector]').one('click','',function() { 
    if (!clicked) { 
     .info[the complicated selector].hide(400); 
     clicked = true; 
    }  
    }); 
}) 

Answer 4

옵션의 몇 :

• 클릭 이벤트를 팝업을 제외한 모든 것에 바인딩하는 대신 blur 이벤트를 사용할 수 있습니다.
• 투명하고 전체 페이지 인 div을 팝업과 나머지 페이지 사이에 추가하십시오. 투명 div의 클릭 이벤트가 숨기기를 처리 할 수 ​​있습니다.