我正在使用这段代码:

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

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

这个HTML:

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

问题是,我有链接在div和当他们不再工作时,点击。


当前回答

更新解决方案为:

使用mouseenter和mouseleave代替 的悬停使用活动事件绑定

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

其他回答

现场演示

检查单击区域不在目标元素中,也不在它的子元素中

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

更新:

jQuery停止传播是最好的解决方案

现场演示

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

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

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

如果你在ios系统上有问题,鼠标up在苹果设备上无法工作。

在jquery mousedown /mouseup工作的ipad?

我用这个:

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

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

为我工作在所有设备上(2023);)

<section class="form-wrapper">
 <div class="popup-container">
  Popup Me
 </div>
</section>



$('.form-wrapper').on('click', function(e) {
  var pop_container = $(".popup-container");

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

var $container = $("#popup_container"); $container.click(function(e) { if (e.target.id == $container.attr("id")) { $(this).hide(); } }); #popup_container { background: rgba(200,200,200,0.6); width: 100vh; height: 100vh; position: fixed; display: flex; justify-content: center; align-items: center; } #popup { background: yellow; border: 1px solid black; position: absolute; width: 50%; height: 50%; display: flex; justify-content: center; align-items: center; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="popup_container"> <div id="popup"> Popup </div> </div>

https://jsfiddle.net/041pj7re/

你最好这样写:

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