JavaScript事件冒泡

小丑鱼0703

浏览: 500800 次
性别:
来自: 北京

最近访客更多访客>>

ekingdom

倚月紫凌

Janne

qq85609655

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

冒泡 js

事件冒泡：
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload。
事件冒泡处理可能会激活我们本来不想激活的事件，导致程序错乱，所以必要时要阻止事件冒泡。

标准Event方法 --DOM事件标准（IE不支持)

stopPropagation() ---不在派发事件，阻止它被分派到其他 Document 节点，在事件传播的任何阶段都可以调用它。

ie属性--cancelBubble ---如果事件句柄想阻止事件传播到包容对象，属性设置为true

<script type="text/javascript">
//阻止事件冒泡后，你点击灰色盒子，整个过程只弹一次对话框了（注意与默认情况对比）
function showMsg(obj,e)
{
    alert(obj.id);
    stopBubble(e)
}
//阻止事件冒泡函数
function stopBubble(e)
{
    if (e && e.stopPropagation)
        e.stopPropagation()
    else
        window.event.cancelBubble=true
}
</script>
<body>
	<div onclick="showMsg(this,event)" id="outSide" style="background:#000;>
		<div onclick="showMsg(this,event)" id="inSide" style="background:#CCC">
		</div>
	</div>
</body>

http://www.cnblogs.com/webflash/archive/2010/01/10/1643580.html

分享到：

html5新特性--表单input新属性placeholde ... | 搜索页面文档特定节点的三个方法

2012-03-28 20:58
浏览 1209
评论(1)
分类:Web前端
查看更多

1 楼 zhangyaochun 2012-03-31

你的stopBubble 函数其实可以写成
function stopBubble(e)
{
    if (e && e.stopPropagation)
        e.stopPropagation()
    else
        e.cancelBubble=true   //区别在这
}

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论