js阻止事件冒泡的两种方法

一、冒泡事件简介

当我们点击一个控件的时候，如果包括这个控件的父控件也有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">  。

转载于:https://www.cnblogs.com/Marlboro-pm/p/6928110.html