我有一个div容器,其中包含多个“行”数据,列表中的每个项目均位于其自己的“listRow” div中。我正在使用jQuery通过单击时切换CSS样式来使“listRow” div可选。每行中还包含一个图像div,该图像 float 在其父级“listRow” div的右侧,并包含一个onclick事件。当我单击图像div时,会触发onclick事件,但父级“listRow” div也将被单击并“选中”。

如何防止点击图片div?

伪HTML代码:

<div class="listContainer">
    <div class="listRow" id="listRow1">
        <div class="listItemName">List item #1</div>
        <div class="listItemIcon"><img src="images/icon.png"></div>
    </div>
    <div class="listRow" id="listRow2">
        <div class="listItemName">List item #2</div>
        <div class="listItemIcon"><img src="images/icon.png"></div>
    </div>
</div>

jQuery代码:
$("div.listRow").click(function(){
    $(this).toggleClass("selected");
})

最佳答案

您将使用 event.stopPropagation() :



div.listItemIconclick()事件上,以防止事件冒泡:

$('div.listItemIcon').click(function(e){
    e.stopPropagation();
});

$("div.listRow").click(function(){
   $(this).toggleClass("selected");
});

jsFiddle example here.

10-05 20:34
查看更多