jQuery는 1 div를 제외하고 페이지의 아무 곳이나 클릭합니다.


답변:


141

당신은 적용 할 수 있습니다 click에 대한 body문서 및 취소 click경우 처리하는 click이벤트가 ID를 가진 DIV에 의해 생성되고 menu_content,이 단일 요소에 이벤트를 바인딩하고 바인딩 절약 click모든 요소를 제외하고와menu_content

$('body').click(function(evt){    
       if(evt.target.id == "menu_content")
          return;
       //For descendants of menu_content being clicked, remove this check if you do not want to put constraint on descendants.
       if($(evt.target).closest('#menu_content').length)
          return;             

      //Do processing of click event here for every element except with id menu_content

});

3
DIV의 자손은 어떻습니까?
iKamy

2
if ($ (evt.target) .closest ( '# menu_content'). length) retrun; 업데이트 된 답변을 확인하십시오.
Adil

closest현재 요소로 시작하기 때문에 menu_content를 클릭하고 하위 요소를 클릭하는 것도 처리합니다 . 나는 두 번째 if가 당신에게 필요한 전부 라고 생각합니다 .
goodeye

50

jQuery Event Target 문서를 참조하십시오 . 이벤트 객체의 target 속성을 사용하면 #menu_content요소 내에서 클릭이 발생한 위치를 감지 할 수 있으며, 그렇다면 클릭 핸들러를 일찍 종료 할 수 있습니다. .closest()클릭이의 하위 항목에서 시작된 경우를 처리하는 데 사용해야 합니다 #menu_content.

$(document).click(function(e){

    // Check if click was triggered on or within #menu_content
    if( $(e.target).closest("#menu_content").length > 0 ) {
        return false;
    }

    // Otherwise
    // trigger your click function
});

42

이 시도

 $('html').click(function() {
 //your stuf
 });

 $('#menucontainer').click(function(event){
     event.stopPropagation();
 });

외부 이벤트 를 사용할 수도 있습니다.


5
이것은 작동하지만 event.stopPropagation ()을 사용하면 부모 내에 포함 된 다른 JS에 영향을 미칠 수 있습니다.
EDD 스미스

9

나는이 질문에 대한 답을 알고 있으며 모든 답이 훌륭합니다. 그러나 나는 비슷한 (정확히 같은 것은 아님) 문제를 가진 사람들을 위해이 질문에 2 센트를 더하고 싶었습니다.

보다 일반적인 방법으로 다음과 같이 할 수 있습니다.

$('body').click(function(evt){    
    if(!$(evt.target).is('#menu_content')) {
        //event handling code
    }
});

이렇게하면 id menu_content가있는 요소를 제외한 모든 요소에 의해 발생한 이벤트뿐만 아니라 CSS 선택기를 사용하여 선택할 수있는 요소를 제외한 모든 요소에 의해 발생한 이벤트를 처리 할 수 ​​있습니다.

예를 들어 다음 코드 스 니펫 <li>에서 id를 가진 div 요소의 자손 인 모든 요소를 제외한 모든 요소에 의해 이벤트가 시작됩니다 myNavbar.

$('body').click(function(evt){    
    if(!$(evt.target).is('div#myNavbar li')) {
        //event handling code
    }
});

1
이 방법이 저에게 잘 맞았다 고 말하고 싶었습니다. .is ()와 .closest ()를 ID가없는 css 선택기와 함께 사용했지만 몇 가지 클래스에 감사드립니다
Relipse

7

여기 내가 한 일이 있습니다. 내 datepicker를 닫지 않고 자녀를 클릭 할 수 있는지 확인하고 싶었습니다.

$('html').click(function(e){
    if (e.target.id == 'menu_content' || $(e.target).parents('#menu_content').length > 0) {
        // clicked menu content or children
    } else {
        // didnt click menu content
    }
});

내 실제 코드 :

$('html').click(function(e){
    if (e.target.id != 'datepicker'
        && $(e.target).parents('#datepicker').length == 0
        && !$(e.target).hasClass('datepicker')
    ) {
        $('#datepicker').remove();
    }
});

클릭 온 어린이와 수업을 포함한 멋진 버전이 선택되어야합니다!
rAthus
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.