Javascript jQuery:解除子对象绑定事件？

我在列表项中有一个锚。两个元素都有一个事件。我希望在单击中的锚点时避免单击列表项

我想避免混乱。我找到了这些函数，但无法按照我的要求使用它们：

这就是代码：

// HTML
<ul>
    <li id="1">Item #1 <a href="" class="delete">[DEL]</a></li>
    <li id="2">Item #2 <a href="" class="delete">[DEL]</a></li>
    <li id="3">Item #3 <a href="" class="delete">[DEL]</a></li>
    <li id="4">Item #4 <a href="" class="delete">[DEL]</a></li>    
</ul>

// JS
$("ul").sortable();

$(document).on("click", "li", function() {
    alert("list-item clicked.");
});

$(document).on("click", "a.delete", function(e) {
    e.preventDefault();
    if (confirm("Del?")) {
        alert("list-item clicked.");
    }
    // do nothing
});

//HTML

第1项
第2项
第3项
第4项

//JS
$（“ul”）.sortable（）；
$（文档）。在（“单击”，“li”，函数（）上）{
警报（“单击列表项”）；
});
$（文档）。在（“单击”、“a.delete”上，函数（e）{
e、 预防默认值（）；
如果（确认（“删除”）{
警报（“单击列表项”）；
}
//无所事事
});

这是一把小提琴：

---

最好的办法是什么？提前多谢

由于事件传播，您需要停止事件传播。这可以通过调用

e.stopPropagation（）

来完成，但由于您也在阻止默认操作，因此您可以通过从事件处理程序返回false来完成这两个操作

$(document).on("click", "a.delete", function(e) {
    if (confirm("Del?")) {
        console.log("list-item a clicked.");
    }
    // do nothing

    return false; //prevent default and stop propagation
});

---

演示：

您可以检查单击了哪个元素，并且只有在未单击删除元素的情况下才能运行列表项单击功能

演示：

jQuery：

$(document).on("click", "li", function(e) {
    if (!$(e.target).is('a.delete')){
        alert("list-item clicked.");
    }
});

---

很简单，哇。我真丢脸。谢谢，我会尽快接受你的回答@夸夸其谈：请注意，这只是因为jQuery在后台发挥了一些魔力。您正在使用事件委派，因此两个处理程序都绑定到同一个元素。没有jQuery，

e.stopPropagation（）

在这里就不起作用（不幸的是，文档没有解释到底发生了什么）。