jquery - 检测点击指定区域

Question

<div id="main">
hello world
<div id="second-div">
bye
</div>
</div>

jQuery('#main:not(second-div)').click(function() {
alert('works!');
});

我想检测鼠标点击“主”div，但是当我点击“second-div”div 时点击事件不应该触发。我尝试过使用 ":not(second-div)" 但无论如何点击都会触发。

Answer 1

您可以检查事件的目标属性。（编辑以反映评论中的改进建议）

jQuery('#main').click(function(e) {
    if(e.target===this) {
        alert("works!");
    }
});​

http://jsfiddle.net/rZeXa/

Answer 2

或者你可以试试这个：http: //jsfiddle.net/N6G62/

这应该有助于原因:)

代码

$('#main').click(function(e) {

    alert('works!');

});


$('#main div').click(function(e) {
     e.stopPropagation();
});

​

Answer 3

我知道这很奇怪......

$(document).ready(function(){
       $(this).click(function(e){
            if($(e.originalEvent.originalTarget).prop('id')=='main'){  
              alert('You have clicked on Main') 
            }
   })                       
 });

只是想分享一些我今天学到的东西......

Answer 4

类似于 Daniel 提供的解决方案。我总是is这样识别：

jQuery('#main').click(function(event) {
  if(!$(event.target).is('#second-div'))
   {
     alert('works');
   }
}); 

Answer 5

你应该打电话

    event.stopPropagation();

在您的点击处理程序的第一行。这将阻止事件在层次结构中的传播。