Question

在我用JQuery编写的脚本中，我正在尝试向div添加点击处理程序，但忽略对其中的子a标记的点击。

你可以看到一个关于我目前正在尝试（和失败）如何在这里实现它的JSFiddle：http://jsfiddle.net/q15s25Lx/1/

$(document).ready(function() {
   $(document).on('click', '.post:not(a)', function(e) {
         alert($(this).text()); 
   });
});

<div class="post">This is some <a href="#">text</a> in a div. Click me please.</div>

在我的真实页面中，a标记都有自己的点击处理程序，因此我需要能够同时监听这些标记。

所以，理想情况下我想使用类似：not（）选择器来忽略对这个特定处理程序的点击。

这样的事情可能吗？

Answer 1

您需要使用.stopPropagation()停止向子元素传播事件：

 $(document).on('click', '.post a', function(e) {
      e.stopPropagation();
 });

Working Demo

Answer 2

您需要添加另一个处理锚点的处理程序并阻止事件传播：

$(document).on('click', '.post a', function (e) {
    e.stopPropagation();
    e.preventDefault();
});

如果没有这个，当你点击a时，事件就会冒泡到父.post，然后处理程序就会触发它。

Answer 3

尝试使用stopPropogation（）

阻止事件冒泡DOM树

$(document).ready(function() {
    $(document).on('click', '.post a', function(e) {
          e.stopPropagation();
          alert($(this).text()); 
    });
});

Fiddle Demo

Answer 4

在事件处理程序的末尾只有return false;。

    $(document).on('click', '.post', function (e) {

        alert($(this).text());//will show entire text
    });
    $(document).on('click', '.post a', function (e) {

        alert($(this).text());//will show 'text'
        return false;
    });

工作小提琴：http://jsfiddle.net/q15s25Lx/2/

return false将同时作为e.preventDefault()＆amp; e.stopPropagation()

Answer 5

所有其他帖子都没有解释您的代码失败的原因。你的选择器说：找到一个具有类post并且不是锚的元素。这并不是说孩子是否被点击并且是否是一个不能处理的孩子。

现在有两种方法可以解决它。一种是防止咔哒声从锚点冒出来。你可以在锚上添加另一个监听器。

$(document).on('click', '.post a', function (evt) {
    evt.stopPropagation();  //event will not travel up to the parent
});

$(document).on('click', '.post', function (evt) {
    console.log("Click click");
});

或者其他选项不是添加第二个事件，而是检查点击的内容。

$(document).on('click', '.post', function (evt) {
    var target = $(evt.target);  //get what was clicked on
    if (target.is("a")) {  //check to see if it is an anchor
        return; // I am an anchor so I am exiting early
    }
    console.log("Click click");
});

Answer 6

或者让jquery为你处理它。 return false

   $(document).on('click', '.post:not(a)', function() {
         alert($(this).text()); 
         return false;
   });

使用：not（）忽略子链接上的点击？

6 个答案:

Working Demo