您的位置：首页 > 其它

取消事件冒泡

2011-01-09 12:43 316 查看

IE 的事件机制中，触发事件会从子元素向父元素逐级上传，如果子元素触发了单击事件，那么也会触发父元素的单击事件；event.cancelBubble=true;可以停止事件继续上传。补充一点，ie的事件传递是从下到上的：

事件来源对象->上级对象->上上级对象->.....->body->document->window

NS的事件传递是从上到下：

window->document->body->....->事件来源对象实例源码如下：

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>event.cancelBubble</title>

<style>

<!--

* {font:menu}

-->

</style>

</head>

<body>

<span onclick=alert("你好")>点我 <span>再点我</span></span><br><br>

<span onclick=alert("你好")>点我 <span onclick=event.cancelBubble=true;>再点我</span></span>

</body>

</html>

实例2：

<!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" lang="zh" xml:lang="zh">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="developer" content="Realazy" />

<title>Bubble in JavaScript DOM--JavaScript 的事件冒泡 demo　</title>

<style type="text/css" media="screen">

div * {display:block; margin:4px; padding:4px; border:1px solid white;}

textarea {width:20em; height:2em;}

</style>

<script type="text/javascript">

//<![CDATA[

function init(){

var log = document.getElementsByTagName('textarea')[0];

var all = document.getElementsByTagName('div')[0].getElementsByTagName('*');

for (var i = 0, n = all.length; i < n; ++i){

all[i].onmouseover = function(e){

this.style.border = '1px solid red';

log.value = '鼠标现在进入的是： ' + this.nodeName;

};

all[i].onmouseout = function(e){

this.style.border = '1px solid white';

};

}

var all2 = document.getElementsByTagName('div')[1].getElementsByTagName('*');

for (var i = 0, n = all2.length; i < n; ++i){

all2[i].onmouseover = function(e){

this.style.border = '1px solid red';

if (e) //停止事件冒泡

e.stopPropagation();

else

window.event.cancelBubble = true;

log.value = '鼠标现在进入的是： ' + this.nodeName;

};

all2[i].onmouseout = function(e){

this.style.border = '1px solid white';};

}

}

window.onload = init;

//]]>

</script>

</head>

<body>

<h1>Bubble in JavaScript DOM</h1>

<p>DOM树的结构是：</p>

<pre><code>

UL

- LI

- A

- SPAN

</code></pre>

<div>

<ul>

<li><a href="#"><span>Bubbllllllllllllllle</span></a></li>

<li><a href="#"><span>Bubbllllllllllllllle</span></a></li>

</ul>

</div>

<textarea></textarea>

<p>鼠标进入UL的任何一个子元素，如果不停止冒泡，我们从UL到SPAN都定义了鼠标悬停（<code>mouseover</code>）事件，这个事件会上升了UL，从而从鼠标所进入的元素到UL元素都会有红色的边。</p>

<div>

<ul>

<li><a href="#"><span>Bubbllllllllllllllle</span></a></li>

<li><a href="#"><span>Bubbllllllllllllllle</span></a></li>

</ul>

</div>

<p>如果停止冒泡，事件不会上升，我们就可以获取精确的鼠标进入元素。</p>

</body>

</html>

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

标签：

相关文章推荐

新的分享

章节导航