javascript - 一个元素内的多个点击事件

Question

我有以下 HMTL 代码：

<li>
    <img .../>
    <img .../>
    <img .../>
</li>

我想为每个元素注册不同的功能（一个用于列表项，三个用于图像）。我注册了所有的点击事件，但是当我点击图片时，li 函数会触发。

li.addEventListener("click",open,false);
img1.addEventListener("click",edit,false);
img2.addEventListener("click",delete,false);
img3.addEventListener("click",add,false);

当您将最后一个参数设置为 true 但仍然没有运气时，我用谷歌搜索了会发生什么。

感谢所有的帮助。

Answer 1

当你定义你的函数时，停止事件传播，如下所示：

function open(e) {
   e.stopPropagation();
}

function edit(e) {
   e.stopPropagation()
}

等等...

Answer 2

扩展 designcise 的答案...您需要使用 e.stopPropagation() 来阻止事件冒泡

$('li img').on('click',function(e){
    e.stopPropagation();
    alert('img clicked');
});

这里有一个 jsfiddle http://jsfiddle.net/hbGRS/