javascript - jQuery：孩子的解除绑定事件？

Question

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

我想避免混乱。我找到了这个功能，但我无法按照我的意愿使用它们：

• http://api.jquery.com/off/
• http://api.jquery.com/unbind/

那是代码：

// 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
});

这是一个小提琴：http: //jsfiddle.net/UtE87/1/

最好的方法是什么？提前非常感谢！

Answer 1

正是由于事件传播，您需要停止事件传播。它可以通过调用来完成，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
});

演示：小提琴

Answer 2

您可以检查单击了哪个元素，如果未单击删除元素，则仅运行列表项单击功能。

演示：http: //jsfiddle.net/k5sdC/1/

jQuery：

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