Question

javascript事件的冒泡机制，以及如何阻止冒泡

Answer 1

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();elsewindow.event.cancelBubble = true; log.value = '鼠标现在进入的是： ' + this.nodeName;};all2[i].onmouseout = function(e){ this.style.border = '1px solid white';};}}window.onload = init;//]]</script</head<body<h1Bubble in JavaScript DOM</h1 <pDOM树的结构是：</p <pre<codeUL- LI- A- SPAN</code</pre<div<ul<li<a href="#"<spanBubbllllllllllllllle</span</a</li <li<a href="#"<spanBubbllllllllllllllle</span</a</li</ul</div<textarea</textarea <p鼠标进入UL的任何一个子元素，如果不停止冒泡，我们从UL到SPAN都定义了鼠标悬停（<codemouseover</code）事件，这个事件会上升了UL，从而从鼠标所进入的元素到UL元素都会有红色的边。</p<div<ul<li<a href="#"<spanBubbllllllllllllllle</span</a</li <li<a href="#"<spanBubbllllllllllllllle</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 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。