programing

jQuery 1div를 제외한 페이지의 아무 곳이나 클릭

topblog 2023. 9. 5. 19:32
반응형

jQuery 1div를 제외한 페이지의 아무 곳이나 클릭

하나의 div를 제외하고 내 페이지의 아무 곳이나 클릭할 때 기능을 트리거하려면 어떻게 해야 합니까?id=menu_content) ?

신청할 수 있습니다clickbody서류 및 취소의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

});

jQuery 이벤트 대상에 대한 설명서를 참조하십시오.이벤트 개체의 대상 속성을 사용하여 클릭이 발생한 위치를 검색할 수 있습니다.#menu_content요소를 선택하고, 선택한 경우 클릭 핸들러를 조기에 종료합니다.클릭이 다음의 하위 항목에서 발생한 경우를 처리하는 데 사용해야 합니다.#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
});

이것을 먹어보세요.

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

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

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

저는 이 질문에 답했다는 것을 알고 있습니다. 그리고 모든 답은 좋습니다.하지만 저는 비슷한 문제를 가지고 있는 사람들을 위해 이 질문에 제 의견을 덧붙이고 싶었습니다.

보다 일반적인 방법으로 다음과 같은 작업을 수행할 수 있습니다.

$('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
    }
});

여기 제가 한 일이 있습니다. 제 데이트 선택기에 있는 아이들 중 하나라도 닫지 않고 클릭할 수 있는지 확인하고 싶었습니다.

$('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();
    }
});

사용해 볼 수 있습니다.

$(":not(#menu_content)").on("click", function(e) {
    e.stopPropagation();
    // Run your function when clicked anywhere except #menu_content
    // Use with caution, 'cause it will prevent clicking on other elements
});

$("#menu_content").on("click", function(e) {
    e.stopPropagation();
    // Run when clicked on #menu_content
});

언급URL : https://stackoverflow.com/questions/12661797/jquery-click-anywhere-in-the-page-except-on-1-div

반응형