如果在 JavaScript 中只希望事件发生在它的目标而不是在它的父元素上, 即取消它的冒泡事件的发生, 该如何做? 因为按照 JavaScript 发生事件的顺序, 它由两个阶段: 分别从根元素 -- 父元素 -- 目标元素 (捕获阶段), 再到父元素 -- 根元素 (冒泡阶段).
IE 浏览器和其他浏览器提供了不同的方式来取消事件冒泡行为. 下列函数提供了两种方式取消事件冒泡: 标准的 W3C 方式和非标准的 IE 方式.
- function stopBubble(e){
- // 如果传入事件对象且支持 W3C 的 stopPropagation 的用法
- if(e && e.stopPropagation){
- // 即为非 IE 浏览器
- e.stopPropagation();
- }else{
- //IE 方式取消事件冒泡
- Windows.event.cancelBubble=true;
- }
stopPropagation() 方法:
定义及用法:
不再派发事件.
终止事件在传播过程的捕获, 目标处理或起泡阶段进一步传播. 调用该方法后, 该节点上处理该事件的处理程序将被调用, 事件不再被分派到其他节点.
语法:
event.stopPropagation()
说明:
该方法将停止事件的传播, 阻止它被分派到其他 Document 节点. 在事件传播的任何阶段都可以调用它. 注意, 虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用, 但是它可以阻止把事件分派到其他节点.
cancelBubble 方法:
获取或设置一个布尔值, 表明当前事件是否要取消冒泡.
语法:
- event.cancelBubble = bool;
- var bool = event.cancelBubble;
bool 的值为 true 或 false.
如果一个事件是可冒泡的, 则它的 cancelBubble 属性的默认值为 false, 代表允许该事件向上冒泡. 将 cancelBubble 属性设置为 true 以后, 可以阻止该事件的进一步冒泡行为.
注: 该特性已经从 web 标准中删除, 虽然一些浏览器目前仍然支持它, 但也许会在未来的某个时间停止支持, 请尽量不要使用该特性.
来源: http://www.css88.com/qa/javascript/11584.html