Question

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

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

我想检测鼠标点击“main”div，但点击“second-div”div时不应触发click事件。我尝试过使用“：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

类似丹尼尔提供的解决方案。我总是使用is来识别：

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

Answer 5

你应该致电

    event.stopPropagation();

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

检测单击指定区域

5 个答案: