本篇文章给大家分享的内容是关于js阻止事件冒泡的两种方法 ，有需要的朋友可以参考一下
一、冒泡事件简介
当我们点击一个控件的时候，如果包括这个控件的父控件也有click事件，则会继续执行。
方法一：event.stopPropagation( );
例如：
<p> <p>段落文本内容
<input type="button" value="点击" /> </p></p>html代码：
// 为所有p元素绑定click事件
$("p").click( function(event){
alert("p-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和p的clic；
} );方法二：event.target
现在，事件处理程序中的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。这个属性是DOM API中规定的，但是没有被所有浏览器实现 。jQuery对这个事件对象进行了必要的扩展，从而在任何浏览器中都能够使用这个属性。通过.target，可以确定DOM中首先接收到事件的元素（即实际被单击的元素）。而且，我们知道this引用的是处理事件的DOM元素，所以可以编写下列代码：
$(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');
}
})
})此时的代码确保了被单击的元素是
相关推荐：
以上就是js阻止事件冒泡的两种方法 的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
221
