jQuery คลิกที่ใดก็ได้ในเพจยกเว้น 1 div

ฉันจะเรียกใช้ฟังก์ชันได้อย่างไรเมื่อฉันคลิกที่ใดก็ได้บนหน้าของฉันยกเว้นใน div ( id=menu_content) เดียว

คุณสามารถใช้clickกับbodyเอกสารและยกเลิกclickการประมวลผลหากclickเหตุการณ์ถูกสร้างขึ้นโดย div พร้อม id 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องค์ประกอบและหากเป็นเช่นนั้นให้ยุติตัวจัดการคลิกก่อนกำหนด คุณจะต้องใช้กับกรณีที่จับที่คลิกมาในลูกหลานของ.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
});

ลองดู

 $('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

ยกตัวอย่างเช่นในรหัสต่อไป snippet ฉันได้รับเหตุการณ์ยิงโดยองค์ประกอบใด ๆ ยกเว้นทุก<li>องค์ประกอบที่เป็นลูกหลานของส่วน div ที่มี myNavbarID

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

นี่คือสิ่งที่ฉันทำ ต้องการให้แน่ใจว่าฉันสามารถคลิกเด็ก ๆ ใน 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();
    }
});