首页 > 代码库 > js阻止事件冒泡的两种方法

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

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