5

这里- 我希望当你点击任何地方而不是 div 时发生警报。

当我单击 div 时，也会显示警报。

JS

$("html, body").not('.entry-content').click(function() {            
    alert('d');                        
}); ​

HTML

<div class="entry-content"> kkkk </div>​
4

4 回答 4

17

您可以使用 event 参数来查看单击了哪个目标并返回 false

$("html, body").click(function(e) {
    if ($(e.target).hasClass('entry-content')) {
        return false;
    }
    alert('d');
});​

http://jsfiddle.net/keyZw/

您正在使用 .not() 过滤器..但它仍然是您的 html/body 的一部分..所以您需要在 click 函数中处理它。你也只是绑定点击事件..

所以

 // find html,body - not ones with class=entry-content - bind click
 $("html, body").not('.entry-content')

所以这不会阻止警报，因为您的 div 仍在体内

如前所述..您只需要真正绑定到身体

$("body").click(function(e) {
    if ($(e.target).hasClass('entry-content')) {
        return false;
    }
    alert('d');
});​
于 2012-10-18T16:01:03.230 回答
7 
$("html *").click(function(e) {
    if ( e.target.className.indexOf("entry-content") < 0 ) {
        alert('d');
    }
});

演示

原始代码不起作用，因为它.not()适用于它前面的选择器 -html和body. 他们都没有 的类entry-content，所以事件触发

于 2012-10-18T16:00:43.433 回答
1

您还可以在单​​击的元素上停止传播

$("body").click(function() {
    alert();
});

$(".entry-content").click(function(e) {
    e.stopPropagation();
});

也可以通过单击子元素来工作

<div class="entry-content">Element
  <span>Sub element</span>
</div>​

看看小提琴

于 2012-10-18T16:03:29.037 回答
0

问题是您将单击事件添加到 HTML 和 BODY 标记。因此，首先，当您单击正文区域时，您将收到 2 个警报。此外，由于事件向上传播的方式，点击有问题的 DIV 也会将点击事件向上传播到 body 和 html。因此，您需要在点击处理程序内部进行检查，以确定是否要显示警报消息。

我在下面修改了你的 jsfiddle，只在你的选择器中包含 HTML，并检查entry-content处理程序中的类。

http://jsfiddle.net/m2eqS/6/

$("html").click(function(e) {
    if(!$(e.target).hasClass("entry-content")){
      alert('TEST');
   }                        
}); ​

绑定到 HTML 和绑定到 BODY 之间的区别在于，如果您希望能够单击页面上的任何位置，在内容/正文结束的位置下方，您应该使用 HTML。否则使用身体。

于 2012-10-18T16:10:39.023 回答