我有一个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.listItemIcon
的click()
事件上,以防止事件冒泡:
$('div.listItemIcon').click(function(e){
e.stopPropagation();
});
$("div.listRow").click(function(){
$(this).toggleClass("selected");
});
jsFiddle example here.