取消事件冒泡（多个事件重复发生）

来源：互联网发布：2016淘宝联盟导购推广编辑：程序博客网时间：2024/05/15 08:26

在默认情况下，发生在一个子元素上的单击事件（或者其他事件），如果在其父级元素绑定了一个同样的事件，此时点击子元素，click事件会首先被子元素捕获，执行绑定的事件程序，之后会被父级元素捕获，再次激发一段脚本的执行，这就是所谓的“事件冒泡”。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">*{ margin:0; padding:0;}</style></head><body><div id="obj1" style=" width:500px; height:500px; background:#000;"><div id="obj2" style="width:400px; height:400px; background:red;"></div></div><mce:script type="text/javascript"></mce:script></body></html>

在通常情况下，我们只希望事件发生在它的目标而并非它的父级元素上，只需加个stopBubble方法，即可取消事件冒泡，见下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">*{ margin:0; padding:0;}</style></head><body><div id="obj1" style=" width:500px; height:500px; background:#000;"><div id="obj2" style="width:400px; height:400px; background:red;"></div></div><mce:script type="text/javascript"></mce:script></body></html>

现在你可能想知道，什么时候需要阻止事件冒泡？事实上，现在绝大多数情况下都可以不必在意它。但是当你开始开发动态应用程序（尤其是需要处理键盘和鼠标）的时候，就有这个必要了。

英文参考：

cancelBubble Property

Sets or retrieves whether the current event should bubble up the hierarchy of event handlers.

Syntax

event.cancelBubble [ = bCancel ]

Possible Values

bCancelBoolean that specifies or receives one of the following values.falseDefault. Bubbling is enabled, allowing the next event handler in the hierarchy to receive the event. trueBubbling is disabled for this event, preventing the next event handler in the hierarchy from receiving the event.
The property is read/write. The property has a default value of false.
Expressions can be used in place of the preceding value(s), as of Microsoft® Internet Explorer 5. For more information, see About Dynamic Properties.

Remarks

Using this property to cancel bubbling for an event does not affect subsequent events.

Example

This example cancels bubbling of the onclick event if it occurs in the img object when the user presses the SHIFT key. This prevents the event from bubbling up to the onclick event handler for the document.

<SCRIPT LANGUAGE="JScript">function checkCancel(){if (window.event.shiftKey)window.event.cancelBubble = true;}function showSrc(){if (window.event.srcElement.tagName == "IMG")alert(window.event.srcElement.src);}</SCRIPT><BODY onclick="showSrc()"><IMG onclick="checkCancel()" SRC="sample.gif" mce_SRC="sample.gif">

Standards Information
There is no public standard that applies to this property.