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的父事件绑定，因此，当子事件成为事件源时，您需要停止传播父事件。