html如何点击子元素事件而不触发父元素的点击事件——阻止冒泡

时间 2019-12-08

标签 html 如何点击元素事件触发阻止冒泡栏目 HTML 繁體版

原文原文链接

若是子元素和父元素都有点击事件，会出现点击事件冒泡的状况。html

1.如何避免冒泡：函数

html：性能

<html>
 <head></head>
 <body>
  <div class="title login" style="color: #fff;font-size: 14px" id="personalInfo">
   你好, 
   <span style="color:#fff;font-size: 14px " id="login_name_span">望风披靡</span> 
   <span style="color:#fff;font-size: 14px;margin-left: 4px " id="UserLogout">[注销]</span> 
  </div>
 </body>
</html>

js：spa

方法1：code

UserLogout.onclick=function (e) { 
        e.stopPropagation();//阻止事件冒泡便可 
        //e.cancelBubble=true;//非标准的IE方式:;  这里的cancelBubble是 IE事件对象的属性，设为true就能够了

方法2：htm

UserLogout.onclick=function (e) {      
      //事件处理代码
      //其实是终结了这个（点击）事件，冒泡固然也就中止了。
       return false; 
    }

2.关于事件冒泡对象

事件冒泡：当一个元素接收到事件的时候会把他接收到的事件传给本身的父级，一直到window 。（注意这里传递的仅仅是事件并不传递所绑定的事件函数。因此若是父级没有绑定事件函数，就算传递了事件也不会有什么表现但事件确实传递了。）blog

<html>
 <head></head>
 <body>
  var div1 = document.getElementById("div1"); 
  var div2 = document.getElementById("div2"); 
  div2.onclick = function(){alert(1);};
  div1.onclick = function(){alert(2);};//父亲
   //html代码 
   <div id="div1"> 
    <div id="div2">
    </div> 
  </div>
 </body>
</html>

当咱们在div2里面点击的时候，会发现弹出了一次1，接着又弹出了2，这说明点击的时候，不只div2的事件被触发了，它的父级的点击事件也触发了，这种现象就叫作冒泡。事件

冒泡还有一大优势，就是事件委托，并且常常用到，还能提升很大的性能，详情见：http://www.javashuo.com/article/p-kuasragb-hy.htmlget