Javascript jQuery：单击嵌套元素

我有以下标记

<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的单击。我理解这是因为图像在ListItem中。但我希望在单击图像时不要触发ListItem的单击。 有什么方法可以做到这一点吗？

您需要使用它来防止事件在DOM树中冒泡

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

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

按照JQuery文档中的说明使用.one（）

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

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

---

这个方法是我发现的唯一一个处理嵌套元素的方法，特别是由库（如Pivottable（））生成的嵌套元素。

他希望在单击子元素时防止父元素的单击事件。您不认为应该在孩子单击时添加

事件.stopPropagation（）

？事件绑定将不会导致孩子为家长触发事件。我认为确实如此，请看以下内容：尝试对

事件.stopPropagation（）进行注释

我在JSFIDLE中看不到代码有问题吗？我在

.deleteIcon

上使用了

stopPropagation

。你能解释一下它为什么起作用吗？若我从那个里移除它，父处理器也被调用。

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

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