`
zhanshenny
  • 浏览: 260933 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascript取消事件冒泡

javascriptbubble 
阅读更多
关于event.cancelBubble

    由于HTML中的对象都是层次结构，比如一个Table包含了多个TR，一个TR包含了多个TD ，Bubble就是一个事件可以从子节点向父节点传递，比如鼠标点击了一个TD，当前的event.srcElement就是这个TD，但是这种冒泡机制使你可以从TR或者Table处截获这个点击事件，但是如果你event.cancelBubble，则就不能上传事件。

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

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

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

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

实例函数：
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="testnodes">
<ul class = "links" >
<li>Home</li>
<li>About</li>
</ul>
</div>
<div>test</div>
<script type="text/javascript">
var all = document.getElementsByTagName("*");
for( var i = 0; i < all.length; i++ ) {
all[i].onmouseover = function(e) {
this.style.border = "1px solid red ";
stopBubble(e);
}

all[i].onmouseout = function(e) {
this.style.border = "0px";
stopBubble(e);
}
}

function stopBubble(e) {
                        // 如果传入了事件对象，那么就是非IE浏览器
if(e && e.stopPropagation )
   e.stopPropagation();
else
                           //否则，就采用IE的方式来取消事件冒泡
   window.event.cancelBubble = true;
}
  </script>
</body>
</html>
分享到：
| js中==和===
评论
发表评论

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

相关推荐

    JavaScript事件冒泡与取消事件冒泡代码演示

    本段代码演示了如何使用JavaScript取消HTML事件的冒泡，即当后代元素的事件被触发时，祖先元素的相同事件也会被触发。...关键词：事件冒泡、取消冒泡、单击事件。用途：学习如何使用JavaScript取消HTML事件的冒泡。

    javascript阻止事件冒泡和浏览器的默认行为

    //否则，我们需要使用IE的方式来取消事件冒泡 window.event.cancelBubble = true; } 2.当按键后,不希望按键继续传递给如HTML文本框对象时,可以取消返回值.即停止默认事件默认行为. //阻止浏览器的默认行为 ...

    JavaScript阻止事件冒泡示例分享

    之前遇到事件冒泡的问题，也去网上搜索了一番，结果大部分都是一样的代码，贴来...//取消事件冒泡 function stopBubble(e) {  var evt = (e) ? e : window.event;//兼容FF  evt.cancelBubble = true; //evt.stopPro

    浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)

    在前端开发工作中，由于浏览器兼容性等问题...//否则，我们需要使用IE的方式来取消事件冒泡 window.event.cancelBubble = true; return false; 2.阻止浏览器的默认行为 JavaScript代码 //如果提供了事件对象，则这是

    浅谈javascript事件取消和阻止冒泡

    主要介绍了浅谈javascript事件取消和阻止冒泡的方法和示例，有需要的小伙伴可以参考下。

    JavaScript实现事件的中断传播和行为阻止方法示例

    事件传播 ...stopPropagation() w3c取消冒泡 cancleBubble = true IE取消冒泡 取消事件默认效果： returnValue = false IE 取消事件效果 defaultPrevent() w3c取消事件效果 &lt;div id ='cc'&gt;&lt;/di

    JavaScript事件对象event用法分析

    本文实例讲述了JavaScript事件对象event用法。分享给大家供大家参考，具体如下： ...表明是否可以取消事件的默认行为 currentTarget Element 事件处理程序当前正在处理事件的那个元素（监听事件的那个元素） de

    JavaScript笔记

    事件驱动：JavaScript的执行都是由事件引发 解释执行：先读到的先执行，后读到的会替代先读的 可以使用任何文本编辑工具编写 JavaScript 代码，然后由浏览器解释执行。 JavaScript常用于实现如下功能： |--控制...

    javascript demo 基本技巧

    1.javascript获取网址”？”后面的参数：var query = [removed].search.substring(1);... //—取消该事件的冒泡。 window.event.returnValue = false; //事件返回false值。 return false ; } 3.javascript 静态变量，

    js中的事件对象解析1

    DOM事件对象的属性有：bubbles 布尔值 只读 表明事件是否冒泡cancelable 布尔值 只读 表明是否可以取消事件的默认行为currentTarg

    javascript兼容性(实例讲解)

    //取消冒泡 if(e.stopPropagation){ e.stopPropagation();//w3c定义的APIbiaozhun }else{ e.cancelBubble=true;//兼容IE 6,7,8浏览器 } 2.获取某个元素的CSS属性值: //获取某个元素的CSS属性值 function ...

    JS中的触摸事件1

    1 给元素赋值触摸事件事件类型是否可以取消是否走完整个冒泡式出发过程描述浏览器对该事件的默认处理方式touchstart是是用户将某个触摸点置于触摸界面之上未定

    利用jQuery的$.event.fix函数统一浏览器event事件处理

    event.srcElement，在FF浏览器下则是：event.target，另外又比如在FF浏览器下得到光标相对页面的位置是event.pageX，而IE浏览器下的处理方式又是不一样的，当然还有一些像“阻止事件冒泡”以及“取消浏览器默认行为...

    mb-menu:简单的单选菜单

    MB菜单 简单的菜单。 正在安装 ember install ember-mb-menu 基本用法 {{ #mb-menu items = items...如果要防止单击事件冒泡，请传递bubbles=false ，它们将被吞噬。 发展 安装 git clone这个仓库 npm install bower

    最新Python3.5零基础+高级+完整项目（28周全）培训视频学习资料

    最新Python3.5零基础+高级+完整项目（28周全）培训视频学习资料；本资料仅用于学习。 【课程内容】 ...冒泡 选择 插入排序 快排 堆排序 第28周 堆排序复习 归并排序 希尔排序 算法练习 栈和队列 数据结构其他

    jquery-ui.draggable.hold-to-drag:允许将对象从启用触摸的设备上的可滚动容器中拖出

    jquery-ui.draggable.touch-scroll-patch 进行简单的调整即可将... 否则，事件将冒泡到可滚动容器中，并且取消拖动。 要求： jquery.ui.widget.js jquery.ui.mouse.js jquery.ui.draggable.js jquery.ui.touch-punch.js

    jQuery攻略.pdf

    60 3.16 创建“返回顶部”链接 63 3.17 提供“更多……”链接 64 3.18 以动画效果显示文本 67 3.19 以滑动效果来替换文本 70 3.20 使图像滚动 71 3.21 确定被按下的键 75 3.22 防止事件冒泡 77 3.23 链接多个活动 80...

    超实用的jQuery代码段

    8.19 取消AJAX异步请求 第9章 jQuery常用算法 9.1 jQuery遍历算法 9.2 jQuery祖先算法 9.3 jQuery后代算法 9.4 jQuery同胞算法 9.5 jQuery过滤算法 9.6 对一个列表进行排序 9.7 实现JSN对象数组的排序 9.8 将...

Magicbox
Global site tag (gtag.js) - Google Analytics