jQuery nhấp vào bất kỳ đâu trong trang ngoại trừ trên 1 div

Làm cách nào để kích hoạt một hàm khi tôi nhấp vào bất kỳ đâu trên trang của mình ngoại trừ trên một div ( id=menu_content)?

Bạn có thể áp dụng clicktrên bodytài liệu và hủy clickxử lý nếu clicksự kiện được tạo bởi div với id menu_content, Điều này sẽ liên kết sự kiện với một phần tử duy nhất và lưu ràng buộc của clickvới mọi phần tử ngoại trừ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

});

Xem tài liệu về Mục tiêu sự kiện jQuery . Sử dụng thuộc tính đích của đối tượng sự kiện, bạn có thể phát hiện nơi nhấp chuột bắt nguồn trong #menu_contentphần tử và nếu có, hãy kết thúc sớm trình xử lý nhấp chuột. Bạn sẽ phải sử dụng .closest()để xử lý các trường hợp mà nhấp chuột bắt nguồn từ hậu duệ của #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
});

thử đi

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

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

bạn cũng có thể sử dụng các sự kiện bên ngoài

Tôi biết rằng câu hỏi này đã được trả lời, Và tất cả các câu trả lời đều tốt. Nhưng tôi muốn thêm hai xu của mình vào câu hỏi này cho những người có vấn đề tương tự (nhưng không hoàn toàn giống nhau).

Nói một cách tổng quát hơn, chúng ta có thể làm như sau:

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

Bằng cách này, chúng tôi có thể xử lý không chỉ các sự kiện được kích hoạt bởi bất kỳ thứ gì ngoại trừ phần tử có id menu_contentmà còn các sự kiện được kích hoạt bởi bất kỳ thứ gì ngoại trừ bất kỳ phần tử nào mà chúng tôi có thể chọn bằng cách sử dụng bộ chọn CSS.

Ví dụ: trong đoạn mã sau, tôi nhận được các sự kiện được kích hoạt bởi bất kỳ phần tử nào ngoại trừ tất cả các <li>phần tử là con của phần tử div có id myNavbar.

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

đây là những gì tôi đã làm. muốn đảm bảo rằng tôi có thể nhấp vào bất kỳ trẻ nào trong bộ chọn ngày của mình mà không cần đóng nó.

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

mã thực tế của tôi:

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