Sử dụng jQuery để ẩn DIV khi người dùng nhấp vào bên ngoài nó

Tôi đang sử dụng mã này:

$('body').click(function() {
   $('.form_wrapper').hide();
});

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

Và HTML này :

<div class="form_wrapper">
   <a class="agree" href="javascript:;">I Agree</a>
   <a class="disagree" href="javascript:;">Disagree</a>
</div>

Vấn đề là tôi có các liên kết bên trong divvà khi chúng không còn hoạt động khi nhấp vào.

Có cùng một vấn đề, đã đưa ra giải pháp dễ dàng này. Nó thậm chí còn hoạt động đệ quy:

$(document).mouseup(function(e) 
{
    var container = $("YOUR CONTAINER SELECTOR");

    // if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
        container.hide();
    }
});

Bạn nên đi với một cái gì đó như thế này:

var mouse_is_inside = false;

$(document).ready(function()
{
    $('.form_content').hover(function(){ 
        mouse_is_inside=true; 
    }, function(){ 
        mouse_is_inside=false; 
    });

    $("body").mouseup(function(){ 
        if(! mouse_is_inside) $('.form_wrapper').hide();
    });
});

Mã này phát hiện bất kỳ sự kiện nhấp chuột nào trên trang và sau đó ẩn #CONTAINERphần tử khi và chỉ khi phần tử được nhấp không phải là #CONTAINERphần tử cũng không phải là một trong các hậu duệ của nó.

$(document).on('click', function (e) {
    if ($(e.target).closest("#CONTAINER").length === 0) {
        $("#CONTAINER").hide();
    }
});

Bạn có thể muốn kiểm tra mục tiêu của sự kiện nhấp vào cơ thể thay vì dựa vào stopPropagation.

Cái gì đó như:

$("body").click
(
  function(e)
  {
    if(e.target.className !== "form_wrapper")
    {
      $(".form_wrapper").hide();
    }
  }
);

Ngoài ra, phần tử cơ thể có thể không bao gồm toàn bộ không gian hình ảnh được hiển thị trong trình duyệt. Nếu bạn nhận thấy rằng các nhấp chuột của bạn không đăng ký, bạn có thể cần thêm trình xử lý nhấp chuột cho phần tử HTML thay thế.

Bản thử trực tiếp

Kiểm tra khu vực nhấp không nằm trong thành phần được nhắm mục tiêu hoặc trong đó là con

$(document).click(function (e) {
    if ($(e.target).parents(".dropdown").length === 0) {
        $(".dropdown").hide();
    }
});

CẬP NHẬT:

jQuery dừng lan truyền là giải pháp tốt nhất

Bản thử trực tiếp

$(".button").click(function(e){
    $(".dropdown").show();
     e.stopPropagation();
});

$(".dropdown").click(function(e){
    e.stopPropagation();
});

$(document).click(function(){
    $(".dropdown").hide();
});

$(document).click(function(event) {
    if ( !$(event.target).hasClass('form_wrapper')) {
         $(".form_wrapper").hide();
    }
});

Cập nhật giải pháp cho:

• sử dụng mouseenter và mouseleave thay thế
• sử dụng di chuột ràng buộc sự kiện trực tiếp

var mouseOverActiveElement = false;

$('.active').live('mouseenter', function(){
    mouseOverActiveElement = true; 
}).live('mouseleave', function(){ 
    mouseOverActiveElement = false; 
});
$("html").click(function(){ 
    if (!mouseOverActiveElement) {
        console.log('clicked outside active element');
    }
});

Một giải pháp không có jQuery cho câu trả lời phổ biến nhất :

document.addEventListener('mouseup', function (e) {
    var container = document.getElementById('your container ID');

    if (!container.contains(e.target)) {
        container.style.display = 'none';
    }
}.bind(this));

MDN: https://developer.mozilla.org/en/docs/Web/API/Node/contains

Bản demo trực tiếp với ESCchức năng

Hoạt động trên cả Desktop và Mobile

var notH = 1,
    $pop = $('.form_wrapper').hover(function(){ notH^=1; });

$(document).on('mousedown keydown', function( e ){
  if(notH||e.which==27) $pop.hide();
});

_{Nếu trong một số trường hợp, bạn cần chắc chắn rằng phần tử của bạn thực sự hiển thị khi bạn nhấp vào tài liệu: if($pop.is(':visible') && (notH||e.which==27)) $pop.hide();}

Sẽ không có cái gì đó như công việc này?

$("body *").not(".form_wrapper").click(function() {

});

hoặc là

$("body *:not(.form_wrapper)").click(function() {

});

Ngay cả giày lười:

$("html").click(function(){ 
    $(".wrapper:visible").hide();
});

Thay vì lắng nghe từng cú nhấp chuột vào DOM để ẩn một yếu tố cụ thể, bạn có thể đặt thành tabindexphụ huynh <div>và lắng nghe các focusoutsự kiện.

Cài đặt tabindexsẽ đảm bảo rằng blursự kiện được kích hoạt trên <div>(thông thường nó sẽ không).

Vì vậy, HTML của bạn sẽ trông như sau:

<div class="form_wrapper" tabindex="0">
    <a class="agree" href="javascript:;">I Agree</a>
    <a class="disagree" href="javascript:;">Disagree</a>
</div>

Và JS của bạn:

$('.form_wrapper').on('focusout', function(event){
    $('.form_wrapper').hide();
});

Và đối với các thiết bị Touch như IPAD và IPHONE, chúng ta có thể sử dụng mã sau

$(document).on('touchstart', function (event) {
var container = $("YOUR CONTAINER SELECTOR");

if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.hide();
    }
});

Đây là một jsfiddle tôi tìm thấy trên một chủ đề khác, cũng hoạt động với khóa esc: http://jsfiddle.net/S5ftb/404

    var button = $('#open')[0]
    var el     = $('#test')[0]

    $(button).on('click', function(e) {
      $(el).show()
      e.stopPropagation()
    })

    $(document).on('click', function(e) {
      if ($(e.target).closest(el).length === 0) {
        $(el).hide()
      }
    })

    $(document).on('keydown', function(e) {
      if (e.keyCode === 27) {
        $(el).hide()
      }
    })

Được xây dựng từ câu trả lời tuyệt vời của prc322.

function hideContainerOnMouseClickOut(selector, callback) {
  var args = Array.prototype.slice.call(arguments); // Save/convert arguments to array since we won't be able to access these within .on()
  $(document).on("mouseup.clickOFF touchend.clickOFF", function (e) {
    var container = $(selector);

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
      container.hide();
      $(document).off("mouseup.clickOFF touchend.clickOFF");
      if (callback) callback.apply(this, args);
    }
  });
}

Điều này thêm một vài điều ...

1. Được đặt trong một hàm với một cuộc gọi lại với các đối số "không giới hạn"
2. Đã thêm một lệnh gọi đến .off () của jquery được ghép nối với một không gian tên sự kiện để hủy liên kết sự kiện khỏi tài liệu khi nó được chạy.
3. Bao gồm touchend cho chức năng di động

Tôi hi vọng điêu nay se giup được ai đo!

nếu bạn gặp sự cố với ios, mouseup không hoạt động trên thiết bị apple.

mousedown / mouseup trong jquery có hoạt động cho ipad không?

tôi sử dụng cái này

$(document).bind('touchend', function(e) {
        var container = $("YOURCONTAINER");

          if (container.has(e.target).length === 0)
          {
              container.hide();
          }
      });

(Chỉ cần thêm vào câu trả lời của prc322.)

Trong trường hợp của tôi, tôi đang sử dụng mã này để ẩn menu điều hướng xuất hiện khi người dùng nhấp vào tab thích hợp. Tôi thấy thật hữu ích khi thêm một điều kiện bổ sung, rằng mục tiêu của nhấp chuột bên ngoài vùng chứa không phải là một liên kết.

$(document).mouseup(function (e)
{
    var container = $("YOUR CONTAINER SELECTOR");

    if (!$("a").is(e.target) // if the target of the click isn't a link ...
        && !container.is(e.target) // ... or the container ...
        && container.has(e.target).length === 0) // ... or a descendant of the container
    {
        container.hide();
    }
});

Điều này là do một số liên kết trên trang web của tôi thêm nội dung mới vào trang. Nếu nội dung mới này được thêm vào cùng lúc với menu điều hướng biến mất, nó có thể gây mất phương hướng cho người dùng.

Rất nhiều câu trả lời, phải là một quyền của đoạn văn đã thêm một ... Tôi không thấy câu trả lời hiện tại (jQuery 3.1.1) - vì vậy:

$(function() {
    $('body').on('mouseup', function() {
        $('#your-selector').hide();
    });
});

var n = 0;
$("#container").mouseenter(function() {
n = 0;

}).mouseleave(function() {
n = 1;
});

$("html").click(function(){ 
if (n == 1) {
alert("clickoutside");
}
});

 $('body').click(function(event) {
    if (!$(event.target).is('p'))
    {
        $("#e2ma-menu").hide();
    }
});

plà tên thành phần Trường hợp người ta có thể vượt qua id hoặc lớp hoặc tên thành phần.

Trả về false nếu bạn nhấp vào .form_wrapper:

$('body').click(function() {
  $('.form_wrapper').click(function(){
  return false
});
   $('.form_wrapper').hide();
});

//$('.form_wrapper').click(function(event){
//   event.stopPropagation();
//});

Đính kèm một sự kiện nhấp chuột vào các yếu tố cấp cao nhất bên ngoài trình bao bọc biểu mẫu, ví dụ:

$('#header, #content, #footer').click(function(){
    $('.form_wrapper').hide();
});

Điều này cũng sẽ hoạt động trên các thiết bị cảm ứng, chỉ cần đảm bảo bạn không bao gồm cha mẹ của .form_wrapper trong danh sách các công cụ chọn.

var exclude_div = $("#ExcludedDiv");;  
$(document).click(function(e){
   if( !exclude_div.is( e.target ) )  // if target div is not the one you want to exclude then add the class hidden
        $(".myDiv1").addClass("hidden");  

}); 

VĨ CẦM

Sao chép từ https://sdtuts.com/click-on-not-specified-element/

Bản demo trực tiếp http://demos.sdtuts.com/click-on-specified-element

$(document).ready(function () {
    var is_specified_clicked;
    $(".specified_element").click(function () {
        is_specified_clicked = true;
        setTimeout(function () {
            is_specified_clicked = false;
        }, 200);
    })
    $("*").click(function () {
        if (is_specified_clicked == true) {
//WRITE CODE HERE FOR CLICKED ON OTHER ELEMENTS
            $(".event_result").text("you were clicked on specified element");
        } else {
//WRITE CODE HERE FOR SPECIFIED ELEMENT CLICKED
            $(".event_result").text("you were clicked not on specified element");
        }
    })
})

tôi đã làm nó như thế này:

var close = true;

$(function () {

    $('body').click (function(){

        if(close){
            div.hide();
        }
        close = true;
    })


alleswasdenlayeronclicknichtschliessensoll.click( function () {   
        close = false;
    });

});

dojo.query(document.body).connect('mouseup',function (e)
{
    var obj = dojo.position(dojo.query('div#divselector')[0]);
    if (!((e.clientX > obj.x && e.clientX <(obj.x+obj.w)) && (e.clientY > obj.y && e.clientY <(obj.y+obj.h))) ){
        MyDive.Hide(id);
    }
});

Bằng cách sử dụng mã này, bạn có thể ẩn bao nhiêu mục bạn muốn

var boxArray = ["first element's id","second element's id","nth element's id"];
   window.addEventListener('mouseup', function(event){
   for(var i=0; i < boxArray.length; i++){
    var box = document.getElementById(boxArray[i]);
    if(event.target != box && event.target.parentNode != box){
        box.style.display = 'none';
    }
   }
})

Những gì bạn có thể làm là liên kết một sự kiện nhấp chuột vào tài liệu sẽ ẩn danh sách thả xuống nếu một cái gì đó bên ngoài danh sách được nhấp vào, nhưng sẽ không ẩn nó nếu một cái gì đó bên trong danh sách thả xuống, vì vậy sự kiện "hiển thị" của bạn (hoặc trượt hoặc bất cứ điều gì hiển thị thả xuống)

    $('.form_wrapper').show(function(){

        $(document).bind('click', function (e) {
            var clicked = $(e.target);
            if (!clicked.parents().hasClass("class-of-dropdown-container")) {
                 $('.form_wrapper').hide();
            }
        });

    });

Sau đó, khi ẩn nó, hủy liên kết sự kiện nhấp

$(document).unbind('click');

Theo các tài liệu , .blur()hoạt động nhiều hơn <input>thẻ. Ví dụ:

$('.form_wrapper').blur(function(){
   $(this).hide();
});