javascript - jQuery：单击嵌套元素

Question

我有以下标记

<ol>
    <li class="ListItem">
        <span class="sub">@qItem.CategoryText</span>
        <input type="image" src="http://icons.iconarchive.com/icons/tatice/just-bins/256/bin-red-full-icon.png" width="30" class="deleteIcon" name="QuestionId" value="@qItem.Id" />
    </li>
</ol>

和以下脚本

$(".ListItem").click(function(){
doActionA();
});

$(".deleteIcon").click(function(){
doActionB();
});

---

当我点击图片时，它也会触发 ListItem 的点击。我知道这是因为图像在 ListItem 内。但我希望在单击图像时不会触发 ListItem 的单击。有什么办法吗？

Answer 1

$(".deleteIcon").click(function(e){
    doActionB();
    e.stopPropagation();
});

Answer 2

您需要使用event.stopPropagation()来防止事件冒泡 DOM 树。

$(".deleteIcon").click(function(event){
    event.stopPropagation()
    doActionA();    
});

您使用删除图标绑定的事件正在触发与 ListItem 绑定的父事件，因此当子事件是事件源时，您需要停止父事件的传播。

Answer 3

$(document).on("click", ".deleteIcon", function() {
  doActionB();
});

这种方法是我发现的唯一一种可以处理嵌套元素的方法，尤其是那些由诸如 Pivottable （https://github.com/nicolaskruchten/pivottable）之类的库生成的元素

Answer 4

$(".deleteIcon").click(function(){
    doActionA();
    return false;  
});

Answer 5

按照 JQuery 文档中的说明使用 .one()。