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>