时间戳

首页 > 解决方案 > jQuery：点击元素不包括点击子元素

javascript - jQuery：点击元素不包括点击子元素

问题描述

我正在努力获得正确的 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

但两者总是被触发。任何线索在这种情况下正确的选择器是什么？

标签： javascriptjqueryhtml

解决方案

您可以使用它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>

推荐阅读