jQuery：单击元素但不包括子元素的单击事件

Question

我在为获取正确的jQuery选择器以点击特定元素而苦恼。以下是我手头的HTML代码：

<label class="title-label" for="me">Some Title<i class="fa fa-times del-class"></i></label>

我有两个单独的jQuery监听器：

$(document).on("click", ".title-label", function (e) { //magic happens here

还有一个：

$(document).on("click", ".del-class", function (e) { //the whole label gets deleted

当我点击标签时，我会向服务器发送一个 .ajax 请求，魔法就会发生。还有一个小的 i 图标用于删除整个标签，它也可以正常工作。然而，当我点击 .del-class 图标时，它首先触发了 .title-label 的点击事件，从而发送请求到服务器，并发生魔法，然后标签被删除。这个图标需要留在标签内部，但当我点击它时，它不应触发标签的点击事件和魔法，而是立即删除标签。

我尝试使用 :not 选择器来包括各种尝试，例如：

:not('.del-class') .title-label

但是两者总是同时触发。在这种情况下，正确的选择器是什么？

- mmvsbg

Answer 1

你可以使用 e.stopPropagation() 来防止事件在 DOM 树中冒泡，从而防止任何父级处理程序收到该事件的通知。

$(document).on("click", ".title-label", function(e) {
  console.log('title-label click');
});

$(document).on("click", ".del-class", function(e) {
  e.stopPropagation();  //Add
  console.log('del-class click');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="title-label" for="me">Some Title<i class="fa fa-times del-class"> Other text </i></label>

- Eddie

---

可能值得注意的是，即使点击事件已经冒泡到父元素，当您执行此操作时，jQuery的事件委托处理会使其看起来好像没有冒泡到父元素。 - T.J. Crowder

有趣的是，我没想到 stopPropagation 会奏效，但它似乎起作用了。谢谢！ - mmvsbg

这样父事件就不会在子元素上触发了。它应该是反过来的 :) - Mihai T

哦..我重新表述了一下，以避免混淆 :) - Eddie

Answer 2

您可以检查event.target是否为图标，并在if/else语句中执行相关操作。

请参见下面的示例：

$(document).on("click", ".title-label", function(e) {
let tgt = e.target
      if (!$(tgt).is('.del-class ') ) {
          console.log('do magic now')
        }
        else {
          console.log('delete label straight away')
        }
    //or
    
    !$(tgt).is('.del-class ') ? console.log('do magic now') : console.log('delete label straight away')
        
})

i {
  width: 20px;
  height: 20px;
  background: Red;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="title-label" for="me">Some Title<i class="fa fa-times del-class"></i></label>

- Mihai T

Answer 3

如果我理解正确，您有两个元素，其中一个嵌套在另一个中，如果您需要两个单独的侦听器，您需要在子元素上使用event.stopPropagation()。

Example: https://jsfiddle.net/xpvt214o/239539/

$('.parent_div_click').on('click',function(event){
    console.log('click in parent');
});
$('.child_i_click').on('click',function(event){
        event.stopPropagation();
    console.log('click in child');
});

希望这可以帮到你

- Teobis

---

这个答案与@Eddie的答案相同，但没有工作代码片段，也没有OP提供的（少量）代码。 - Mihai T