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>