可使用
event.stopPropagation阻止W3C的冒泡,
event.cancelBubble=true阻止IE的冒泡.
e.preventDefault();取消默认事件, 如link打开窗口事件.
例如:
<!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="gb2312">
<head>
<title>阻止JavaScript事件冒泡传递（cancelBubble 、stopPropagation）</title>
<meta name="keywords"
content="JavaScript,事件冒泡,cancelBubble,stopPropagation" />
<script type="text/javascript">
function doSomething(obj, evt) {
var e = (evt) ? evt : window.event;
if (window.event) {
e.cancelBubble = true;
} else {
//e.preventDefault();
e.stopPropagation();
}
}
</script>
</head>
<body>
<div id="parent1" onclick="alert(this.id)"
style="width: 250px; background-color: yellow">
<p>This is parent1 div.</p>
<div id="child1" onclick="alert(this.id)"
style="width: 200px; background-color: orange">
<p>This is child1.</p>
</div>
<p>This is parent1 div.</p>
</div>
<br />
<div id="parent2" onclick="alert(this.id)"
style="width: 250px; background-color: cyan;">
<p>This is parent2 div.</p>
<div id="child2" onclick="doSomething(this,event);"
style="width: 200px; background-color: lightblue;">
<p>This is child2. Will bubble.</p>
</div>
<p>This is parent2 div.</p>
</div>
</body>
</html>
分享到：
相关推荐
然而，在某些情况下，我们可能希望阻止事件继续向上层元素传播，这就是所谓的“阻止事件冒泡”。 阻止事件冒泡的方法主要有两种：`event.stopPropagation()` 和 `event.stopImmediatePropagation()`。这两种方法在...
标题中的“阻止滚动条事件冒泡”指的是在用户滚动页面某个部分时，阻止这个滚动事件向上传递到其他元素或窗口，特别是阻止`mousewheel`事件的冒泡。`mousewheel`事件通常用于处理鼠标滚轮滚动的行为，它在用户滚动...
// 不仅阻止冒泡，也阻止了事件本身 }); }); <div id="ee">aaaaa <a href="baidu.com">baidu.com</a> ``` 在这个例子中，点击按钮时会触发多个事件处理函数，但通过使用`event.stopPropagation();`和`...
jQuery库提供了方便的方式来处理DOM事件，包括阻止事件冒泡的功能。这个功能在构建交互式网页时非常有用，可以避免不必要的事件处理或者防止多次执行相同的操作。 jQuery中的`event.stopPropagation()`方法是阻止...
除了这两种阻止事件冒泡的方法，JQuery还提供了`event.preventDefault()`，这个方法并不阻止事件冒泡，而是阻止了事件的默认行为。例如，点击链接默认会跳转到新的URL，但如果在事件处理程序中调用了`event....
JQuery 提供了两种方式来阻止事件冒泡。 方式一：event.stopPropagation(); 代码如下: $(“#div1”).mousedown(function(event){ event.stopPropagation(); }); 方式二：return false; 代码如下: $(“#div1”)....
1. `cancelBubble`函数内部首先判断浏览器是否支持`stopPropagation`方法，这是W3C标准中的事件阻止冒泡方法。对于不支持此方法的老版本IE浏览器，它会使用`cancelBubble = true`来达到相同的效果。 2. 在`show(info...
2. 阻止事件冒泡的方法：在实际的开发中，我们经常需要阻止事件冒泡以防止事件被不相关的父级元素捕获。在jQuery中，可以通过几种方式来阻止事件冒泡。 - 使用返回false的方式：在事件处理函数中直接返回false，这...
// 阻止冒泡事件 // 取消事件冒泡 var e = arguments.callee.caller.arguments[0] || event; // 若省略此句，下面的e改为event，IE运行可以，但是其他浏览器就不兼容 if(e && e.stopPropagation){ // Mozilla和...
综上所述，jQuery事件处理机制中的绑定和解绑、事件冒泡与阻止事件冒泡是前端开发中非常重要的知识点。在实际开发过程中，灵活运用这些技术可以实现更加丰富的交互效果，并提升用户体验。通过上述实例的介绍和分析，...
除了使用event对象的方法外，JQuery的事件处理函数还提供了一个简写形式来阻止冒泡，即直接在事件处理函数的末尾返回false。这等同于调用了event.stopPropagation()和event.preventDefault()。例如： ```javascript...
但这个方法通常不是用来阻止冒泡，而是为了提前处理事件。 3. **停止事件的默认行为**： 使用`event.preventDefault()`可以阻止事件的默认行为，但并不会阻止事件的冒泡。在本例中，这可能不是必要的，因为默认...
最近在研究react、redux等，网上找了很久都没有完整的答案，索性自己整理下，这篇文章就来给大家介绍了关于React阻止事件冒泡的相关内容，下面话不多说了，来一起看看详细的介绍吧 在正式开始前，先来看看 JS 中事件...
Vue框架中绑定事件的阻止冒泡失效问题解决方案 在Vue框架中，绑定事件的阻止冒泡失效问题是一个常见的问题。当我们使用Vue框架时，因为框架内部对DOM的处理，导致绑定事件的阻止冒泡失效。下面我们将探讨这个问题的...
标题中提到的“js阻止冒泡及jquery阻止事件冒泡示例介绍”涉及JavaScript和JQuery两种技术在事件处理中阻止事件冒泡的概念。冒泡是指当一个元素上触发了某个事件（如点击），这个事件不仅会在该元素上进行处理，还会...
<%@ Page Language=C# AutoEventWireup=true CodeFile=Default5.aspx.csInherits=Default5%> <!DOCTYPE ...<... <head runat=server>...Porschev--
在处理事件时，有时我们需要阻止默认行为或者防止事件冒泡，以确保事件按照我们的预期执行。本篇将详细介绍`event.preventDefault()`和`event.stopPropagation()`的用法，并提供示例。 1. **阻止默认事件**： 当一...
### JS阻止事件冒泡行为 在Web开发中，事件冒泡是一种浏览器处理事件的机制。当我们点击页面上的某个元素时，事件不仅仅会在该元素上触发，还会传递到其父级元素，最后直至文档的根元素。在多数情况下，这种机制是...