JS中阻止事件冒泡的办法

最新推荐文章于 2025-06-01 21:09:33 发布

栗小咚

最新推荐文章于 2025-06-01 21:09:33 发布

阅读量1.1k

点赞数

分类专栏： web

本文链接：https://blog.youkuaiyun.com/baidu_39567828/article/details/79207694

版权

web 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了JavaScript中如何使用stopPropagation()方法阻止事件冒泡。该方法用于在事件传播过程中终止事件，防止事件继续向其他Document节点传播。在事件处理程序中调用此方法可以阻止事件继续在DOM树中向下传递。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本案例使用的是layui的面板元素

    <div class="layui-colla-item">
    			<h2 class="layui-colla-title" >
   				<button class="layui-btn layui-btn-xs" >发布</button>
    			</h2>
    			<div class="layui-colla-content layui-show">
				<a href='www.baiducom' target="_blank">百度</a>		     
	    		</div>
		  </div>

$(".layui-btn-xs").on('click',function(e){
			e.stopPropagation();
			layer.confirm('确定要发布？',{title: "系统提示",anim: 1,icon: 3,closeBtn: 0},function(index){
				layer.msg("发布成功",{icon: 6, anim: 5});
			});	
			
		});

如上:点击<div class="layui-colla-item"> 时会进行面板的折叠和展开 当点击 <botton/>按钮时触发自身的点击事件以后,还会冒泡继续触发 面板的点击事件.可以通过e.stopPropagetion();方法阻止事件冒泡

stopPropagation() 方法

Event 对象

定义和用法

不再派发事件。

终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。

语法

event.stopPropagation()

说明

该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。