javascript - 避免在重叠图像上调用双重函数？

Question

我有一个较小的图像放在一个较大的图像之上，并且两者都在单击时连接到一个 jQuery 函数。

我的问题是当我点击较小的浏览器时，浏览器首先执行连接到较小的功能，然后它也执行连接到较大的功能。

HTML：

<div id="outer" style="position: relative; width:200px; height:200px; background:#00f;">
    <div id="inner" style="position: absolute; top:100px; left:100px; width:50px; height:50px; background:#0f0;">
    </div>
</div>

jQuery：

$('#outer').click(function(){
    alert('outer');
})

$('#inner').click(function(){
    alert('inner');
})

或者在这里查看 jFiddle：http: //jsfiddle.net/XmG2T/。

当我单击较小的图像时，如何防止浏览器也执行连接到较大图像的第二个功能？

Answer 1

您可以使用event.stopPropagation()来阻止事件从子元素冒泡到它的父元素。

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

$('#inner').click(function(event){
  event.stopPropagation();
  alert('inner');
});

Answer 2

您可以使用stopPropagation来防止事件在 DOM 树中冒泡，从而防止任何父处理程序收到事件通知。

现场演示

$('#inner').click(function(event){
    event.stopPropagation();
    alert('inner');
});