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

最新推荐文章于 2021-03-02 21:34:18 发布

dyunlong

最新推荐文章于 2021-03-02 21:34:18 发布

阅读量106

点赞数

分类专栏： javascript 文章标签： JavaScript 浏览器 XHTML Web HTML ViewUI

本文链接：https://blog.csdn.net/dyunlong/article/details/83482708

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏


<!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();

dyunlong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript事件的冒泡机制，以及如何阻止冒泡

[code="html"]Bubble in JavaScript DOM div * {display:block; margin:4px; padding:4px; border:1px solid white;} textarea {width:20em; height:2em;} //Bubble in JavaScri...
复制链接

扫一扫