jquery - 捕获元素外部的鼠标单击事件

Question

这就是我正在做的事情。

单击链接后，我正在显示一个框CSS

#toshow { display:none; }

HTML

<a href="#" id="mylink" >Link</a>
<div id="toshow">Here is my content</div>

Jquery

$(document).ready(function() {
     $("#mylink").click(function() { 
         $("#toshow").show();
     });
});

现在我想捕获一个事件，用户单击鼠标，如果用户单击的部分不是链接或分区，则分区应该再次隐藏。

如何做到这一点？

Answer 1

$(document.body).click(function(e){
   var $box = $('#mylink');
   if(e.target.id !== 'mylink' && !$.contains($box[0], e.target))
      $("#toshow").hide();
});

您需要检查冒泡到 document.body 的点击事件。在该事件处理程序中，您查找事件目标 ID 并将其与您不想要包含的元素以及作为该排除元素的子元素的所有元素进行比较。

@Starx:(评论中的问题)$.contains() 检查 DOM 节点 是否包含您指定的另一个节点。所以

!$.contains($box[0], e.target)

表示，如果 e.target 不包含节点 $box[0]
请参阅http://api.jquery.com/jQuery.contains/