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">  。