使用 :not() 忽略对子链接的点击？答案

【问题标题】：Using :not() to ignore clicks on children links?使用 :not() 忽略对子链接的点击？
【发布时间】：2015-01-29 23:50:11
【问题描述】：

在我使用 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() 选择器的东西来忽略对这个特定处理程序的点击。

这样的事情可能吗？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

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

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

没有这个，当您单击a 时，事件会冒泡到父.post，并且无论如何都会触发处理程序。

【讨论】：

这很完美！我希望它会取消我的其他听众，但事实并非如此。谢谢！我会尽快将其标记为答案。

【解决方案2】：

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

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

Working Demo

【讨论】：

【解决方案3】：

只是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() & e.stopPropagation()

【讨论】：

【解决方案4】：

尝试使用 stopPropogation() 阻止事件冒泡 DOM 树

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

Fiddle Demo

【讨论】：

他想要的恰恰相反。单击跨度时会触发警报，但单击锚点时不会触发。
啊，我明白了，谢谢你的提醒，我修改我的答案

【解决方案5】：

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

现在有两种方法可以解决它。一是防止点击从锚点冒泡。您将在锚点上添加另一个侦听器。

$(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");
});

【讨论】：

【解决方案6】：

或者让 jquery 为您处理一切。 return false

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

【讨论】：