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树，从而阻止任何父处理程序收到事件通知。

<强> Live Demo

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

避免双重函数调用覆盖图像？

2 个答案: