jq监听子元素被点击_javascript – jQuery：点击不包含子元素点击的元素

我正在努力获得正确的jQuery选择器来点击某个元素.这是我的HTML：

Some Title

我有两个独立的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('.del-class') .title-label

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

解决方法:

您可以使用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');

});

Some Title Other text

标签：jquery,javascript,html

来源： https://codeday.me/bug/20190622/1262265.html