javascript - 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

但两者总是被触发。知道在这种情况下正确的选择器是什么吗？

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>