js阻止事件冒泡的兩種方法

1、冒泡事件簡介

當咱們點擊一個控件的時候，若是包括這個控件的父控件也有click事件，則會繼續執行。

方法一：event.stopPropagation( );

例如：

 

<div>     <p>段落文本內容         <input type="button" value="點擊" />     </p> </div>

html代碼：

 

// 爲全部div元素綁定click事件 $("div").click( function(event){     alert("div-click"); } ); //爲全部p元素綁定click事件 $("p").click( function(event){     alert("p-click"); } ); //爲全部button元素綁定click事件 $(":button").click( function(event){     alert("button-click");     // 阻止事件冒泡到DOM樹上     event.stopPropagation(); // 只執行button的click，若是註釋掉該行，將執行button、p和div的click    } );

方法二：event.target

eventevent.targetDOM API jQuery.targetDOMthisDOM $(document).ready(function(){
 $('#switcher').click(function(event){
  $('#switcher .button').toggleClass('hidden');
  })
 })
  
$(document).ready(function(){
 $('#switcher').click(function(event){
  if(event.target==this){
  $('#switcher .button').toggleClass('hidden');
  }
  })
 })
<div id="switcher">  。