一个元素内的多次点击事件

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/