Question

我有一个div容器，它包含几个“行”数据，列表中的每个项目都有自己的“listRow”div。我正在使用jQuery通过在单击时切换css样式来使“listRow”div可选。在每一行中还有一个图像div，它漂浮在它的父“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");
})

Answer 1

您使用event.stopPropagation()：

event.stopPropagation() - 防止事件冒泡DOM 树，防止任何父处理程序被通知事件。

在div.listItemIcon的{{1}}事件中，以防止事件冒泡：

click()

jsFiddle example here.

Answer 2

如果您抓取事件并使用stopPropagation()函数，则在图像的单击函数中，它应该阻止事件触发元素的父项。例如

$('div.listItemIcon').click(function(e){
    //your code here
    e.stopPropagation();
});

Answer 3

向该函数和以下两个返回行添加一个事件参数：

$("div.listRow").click(function(e){
    if (e.target != this)
        return;
    $(this).toggleClass("selected");
});

防止点击div

3 个答案: