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   
} );
--------------------- 

猜你喜欢

转载自blog.csdn.net/ld395353765/article/details/84862833