<!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="zh" xml:lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="developer" content="Realazy" />
<title>Bubble in JavaScript DOM</title>
<style type="text/css" media="screen">
div * {display:block; margin:4px; padding:4px; border:1px solid white;}
textarea {width:20em; height:2em;}
</style>
<script type="text/javascript">
//<![CDATA[
function init(){
var log = document.getElementsByTagName('textarea')[0];
var all = document.getElementsByTagName('div')[0].getElementsByTagName('*');
for (var i = 0, n = all.length; i < n; ++i){
all[i].onmouseover = function(e){
this.style.border = '1px solid red';
log.value = '鼠标现在进入的是： ' + this.nodeName;
};
all[i].onmouseout = function(e){
this.style.border = '1px solid white';
};
}
var all2 = document.getElementsByTagName('div')[1].getElementsByTagName('*');
for (var i = 0, n = all2.length; i < n; ++i){
all2[i].onmouseover = function(e){
this.style.border = '1px solid red';
if (e) //停止事件冒泡
e.stopPropagation();
else
window.event.cancelBubble = true;
log.value = '鼠标现在进入的是： ' + this.nodeName;
};
all2[i].onmouseout = function(e){
this.style.border = '1px solid white';
};
}
}
window.onload = init;
//]]>
</script>
</head>
<body>
<h1>Bubble in JavaScript DOM</h1>
<p>DOM树的结构是：</p>
<pre><code>
UL
- LI
- A
- SPAN
</code></pre>
<div>
<ul>
<li><a href="#"><span>Bubbllllllllllllllle</span></a></li>
<li><a href="#"><span>Bubbllllllllllllllle</span></a></li>
</ul>
</div>
<textarea></textarea>
<p>鼠标进入UL的任何一个子元素，如果不停止冒泡，我们从UL到SPAN都定义了鼠标悬停（<code>mouseover</code>）事件，这个事件会上升了UL，从而从鼠标所进入的元素到UL元素都会有红色的边。</p>
<div>
<ul>
<li><a href="#"><span>Bubbllllllllllllllle</span></a></li>
<li><a href="#"><span>Bubbllllllllllllllle</span></a></li>
</ul>
</div>
<p>如果停止冒泡，事件不会上升，我们就可以获取精确的鼠标进入元素。</p>
</body>
</html>
从上面的例子可知道当你触发任何一个元素的事件时浏览器默认从该元素向上父元素上之一迭代冒泡的出发具有该事件的父元素，直到包含该元素的最大父元素为止。如果想阻止这样的情况发生，例如，我只想让某个元素执行moveover事件，不想让保护她的父元素执行，就需调用js的阻止函数e.stopPropagation()或者window.event.cancelBubble = true;
这两个方法的意思是:
event.preventDefault()
该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如，如果 type 属性是 "submit"，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。注意，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作。无论哪种情况，调用该方法都没有作用。
event.stopPropagation()
该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。
event是DOM的事件方法，所以不是单独使用，比如指定DOM
由于只看到你的代码片段，无法准确判断全部的问题，你试试下面的方法：
将
event.preventDefault();
改成
e.preventDefault();
分享到：
相关推荐
总结一下，阻止事件冒泡是JavaScript中控制事件处理流程的关键技巧，它允许开发者更精细地管理事件响应。通过`event.stopPropagation()`和`event.stopImmediatePropagation()`，我们可以防止事件在DOM树中向上传播，...
JavaScript事件冒泡是Web开发中的一个关键概念，它在网页交互和动态效果中扮演着重要角色。事件冒泡源于浏览器处理事件的...熟练掌握事件冒泡、事件捕获以及如何阻止冒泡，对于提升JavaScript的事件处理能力至关重要。
Javascript中的事件冒泡...通过对Javascript事件冒泡机制的详细了解和掌握，开发者可以更好地理解在Web开发中事件是如何被触发和处理的，以及如何有效地使用事件监听和处理策略来构建更加复杂和响应用户的交互界面。
JavaScript中的事件冒泡机制是DOM事件处理的核心概念之一，它涉及到事件在DOM树中的传播方式。事件流主要有三种阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。 事件捕获阶段是从DOM树的根节点开始，沿着树向下...
javascript 中事件冒泡和事件捕获机制的详解 二者作用：描述事件触发时序问题 事件捕获：从document到触发事件的那个节点，即自上而下的去触发事件—由外到内 事件冒泡：自下而上的去触发事件—由内到外 绑定事件...
JavaScript事件冒泡机制是Web开发中的一个重要概念，它描述了事件在DOM（文档对象模型）树中传播的顺序。在事件冒泡过程中，事件首先在最具体的元素（通常是触发事件的元素）上触发，然后逐级向上传播至最不具体的...
在Web开发中，事件处理是不可或缺的一部分，其中事件冒泡机制尤为重要。事件冒泡是指事件从最深层的节点开始，逐级向上传播至最顶层的节点。在某些情况下，我们希望阻止这种冒泡行为，以达到特定的功能需求或优化...
JavaScript中的事件处理是Web开发中的核心概念，主要涉及事件冒泡、事件捕获以及事件委托。这三种机制在处理用户交互和DOM元素之间的事件时起着至关重要的作用。 1. **事件冒泡**：事件冒泡是事件处理的默认模式，...
此外，`event.stopPropagation()`方法可以阻止事件继续向上冒泡，而`event.stopImmediatePropagation()`则不仅可以阻止冒泡，还能阻止同一元素上的其他事件处理函数被执行。 总结一下，JavaScript事件冒泡是浏览器...
然而，事件捕获有时在需要尽早处理事件或阻止冒泡的情况下很有用。例如，可以使用捕获来阻止不必要的事件传播，或者在父元素上处理多个子元素共享的事件。 在实际开发中，理解事件冒泡和捕获的差异对于优化性能和...
事件冒泡机制使得开发者可以在父元素上统一管理事件处理，而不需要为每个子元素单独设置事件监听，这样可以大大简化事件处理的代码结构。 事件冒泡可以分为两个阶段：事件捕获和事件冒泡。在W3C标准中，首先发生的...
在JavaScript编程中，事件处理是不可或缺的一部分，尤其是事件冒泡（Event Bubbling）机制，它是理解DOM（Document Object Model）事件处理的关键概念之一。事件冒泡是指事件开始时由最具体的元素（文档中嵌套层次...
在JavaScript和许多其他基于DOM（文档对象模型）的编程语言中，"事件冒泡"是一个重要的概念，尤其在处理用户交互时。事件冒泡是指事件从最深的节点开始，然后逐级向上传播到其父节点的过程。这个过程就像气泡在水中...
阻止JavaScript事件冒泡传递（cancelBubble 、stopPropagation） 在JavaScript事件处理机制中，事件冒泡传递是一个重要的概念。当一个元素触发某个事件时，该事件就会沿着DOM树向上传递，直到到达文档的根元素为止...
总之，JavaScript的事件冒泡机制为网页交互提供了一种高效、灵活的事件处理模型，使得开发者可以方便地管理和响应用户的操作，同时也要注意不同浏览器之间的兼容性和优化问题。理解并掌握事件冒泡对于提升Web应用的...
在JavaScript的世界里，事件冒泡是一个重要的概念，它是指事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上转播至最不具体的节点（文档）的过程。jQuery库提供了方便的方式来处理DOM...
当鼠标进入阻止冒泡的元素时，如果事件对象存在（即`e`），调用`e.stopPropagation();`；否则，使用`window.event.cancelBubble = true;`。这样，当鼠标移动到第二组元素上时，事件就不会向上冒泡到父元素。 理解...
JavaScript事件冒泡是DOM（文档对象模型）中事件处理的核心机制之一，它描述了事件从最深的DOM节点开始触发，然后逐级向上层节点传播的过程。在大型的Web交互项目，尤其是WebGame中，对事件冒泡的精确控制至关重要，...