您的位置：首页 > 其它

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

2009-11-26 18:27 369 查看

在默认情况下，发生在一个子元素上的单击事件（或者其他事件），如果在其父级元素绑定了一个同样的事件，此时点击子元素，

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"><!--
*{ margin:0; padding:0;}
--></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"><!--
var obj1 = document.getElementById('obj1');
var obj2 = document.getElementById('obj2');
obj1.onclick = function(){
alert('我点击了obj1');
}
obj2.onclick = function(e){
alert('我点击了obj2');
}
// --></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"><!--
*{ margin:0; padding:0;}
--></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"><!--
//阻止事件冒泡的通用函数
function stopBubble(e){
// 如果传入了事件对象，那么就是非ie浏览器
if(e&&e.stopPropagation){
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
}else{
//否则我们使用ie的方法来取消事件冒泡
window.event.cancelBubble = true;
}
}
var obj1 = document.getElementById('obj1');
var obj2 = document.getElementById('obj2');
obj1.onclick = function(){
alert('我点击了obj1');
}
obj2.onclick = function(e){
alert('我点击了obj2');
stopBubble(e);
}
// --></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

bCancel

Boolean
that specifies or receives one of the following values.

false	Default. Bubbling is enabled, allowing the next event handler in the hierarchy to receive the event.
true	Bubbling 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 e
vent 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.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航