`
zhanshenny
  • 浏览: 265620 次
  • 性别: 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事件的冒泡。

    jquery取消事件冒泡的三种方法(推荐)

    jQuery提供了几种简单有效的方法来取消事件冒泡，这些方法能够帮助开发者更好地控制事件的传播行为。 1. 使用`return false`取消默认行为并阻止冒泡 在jQuery事件处理函数中直接返回`false`是一种最简单的方式来...

    js如何取消事件冒泡

    在JavaScript中，事件...总的来说，理解并掌握事件冒泡以及如何取消它对于编写高性能、可维护的JavaScript代码至关重要。在处理复杂的交互逻辑时，合理地利用这些方法能帮助我们更好地控制事件的流程，提高用户体验。

    兼容各大浏览器的JavaScript阻止事件冒泡代码

    // 阻止冒泡事件 // 取消事件冒泡 var e = arguments.callee.caller.arguments[0] || event; // 若省略此句，下面的e改为event，IE运行可以，但是其他浏览器就不兼容 if(e && e.stopPropagation){ // Mozilla和...

    JavaScript阻止事件冒泡示例分享

    // 取消事件冒泡 function stopBubble(e) { var evt = (e) ? e : window.event; // 兼容FF和IE // Firefox 下阻止冒泡 if (e && e.stopPropagation) { e.stopPropagation(); } else { // IE 以前的版本支持的...

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

    // 否则，我们需要使用IE的方式来取消事件冒泡 window.event.cancelBubble = true; } ``` #### 3. 阻止浏览器的默认行为 有时候，除了需要阻止事件的传播之外，还需要阻止浏览器的默认行为，比如点击链接后跳转...

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

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

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

    总结来说，JavaScript的事件取消和阻止冒泡是控制页面交互行为的关键工具。通过使用`event.preventDefault()`、`event.stopPropagation()`以及IE特有的方法，我们可以精细地管理事件的行为，确保它们按照我们的预期...

    事件冒泡是什么如何用jquery阻止事件冒泡

    4. 验证事件冒泡的JavaScript代码示例：该示例说明如何通过绑定点击事件到不同的div元素，并通过注释或取消注释event.stopPropagation()来控制事件冒泡的行为。 ```javascript $(document).ready(function(){ $('...

    JavaScript 事件的一些重要说明

    4. **取消事件冒泡**： 事件冒泡是指事件从最深的节点开始，逐级向上层节点传播事件。在示例中，当鼠标移到列表项上时，每个元素都会添加红色边框。为了避免事件冒泡导致父元素也受到同样的效果，我们可以通过调用`...

    jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例

    在阻止默认行为和事件冒泡的示例中，展示了`return false`可以同时阻止事件冒泡和取消默认行为。这在处理表单提交或链接点击时很有用，因为它可以防止页面跳转或者表单提交等默认操作。 综上所述，jQuery事件处理...

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

    ### 阻止浏览器的默认事件和冒泡 ...通过以上介绍，我们可以了解到在实际开发中如何有效地使用JavaScript来控制和管理浏览器的默认事件以及事件的冒泡机制，从而实现更复杂的功能和更好的用户体验。

    JavaScript事件对象深入详解

    - `cancelable`: 如果为`true`，可以通过`preventDefault()`方法取消事件的默认行为。 - `currentTarget`: 正在执行事件处理程序的元素，不同于实际触发事件的`target`元素。 - `defaultPrevented`: 如果`...

    JS冒泡事件的快速解决方法

    JavaScript中的冒泡事件是事件处理中的一个关键概念，它源于事件在DOM（文档对象模型）层级中的传播方式。当一个事件（如鼠标点击）在某个元素上触发时，该事件不仅会在该元素上执行，还会逐级向上层元素传播，直到...

    JavaScript事件机制

    - `preventDefault()`：取消事件的默认行为。 - `stopPropagation()`：阻止事件继续冒泡。 - `bubbles`：布尔值，表示该事件是否支持冒泡。 通过访问这些属性，可以更加精细地控制事件的处理过程。例如，可以在事件...

    javascript事件列表解说

    同时，了解事件冒泡和事件捕获的概念，有助于优化事件处理。 在实际应用中，我们还可以利用事件委托，通过监听父级元素来处理子元素的事件，以减少内存占用和提高性能。此外，还有一些高级技术，如事件阻止（event....

    js冒泡、捕获事件及阻止冒泡方法详细总结

    JavaScript中的事件处理机制主要包括两种模式：事件冒泡和事件捕获。这两个概念是理解JavaScript事件处理的关键，尤其在处理复杂的用户交互和DOM操作时显得尤为重要。 事件冒泡是指事件从最深的节点（子节点）开始...

    JQuery中阻止事件冒泡几种方式及其区别介绍

    在JavaScript和jQuery中，事件冒泡是一个常见的概念，它描述了事件从最深的DOM元素开始向上级元素传播的过程。这种机制允许事件处理程序在不同的层次上被触发，但有时我们可能希望阻止事件继续向上层元素传播。在...

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