JS中阻止事件冒泡的办法

最新推荐文章于 2024-08-15 19:36:37 发布

栗小咚

最新推荐文章于 2024-08-15 19:36:37 发布

阅读量1.1k

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/baidu_39567828/article/details/79207694

版权

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

摘要由CSDN通过智能技术生成

本案例使用的是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='

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

栗小咚

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

模拟点击时阻止事件冒泡

yunsan_的博客

01-09

797

欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：全新的界面设计，将会带来全新的写作体...

【layui】layui折叠面板阻止冒泡事件

weixin_43250628的博客

05-13

1477

前言本文章向大家介绍layui折叠面板阻止冒泡事件，主要包括layui折叠面板阻止冒泡事件使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。要在layui折叠面板的title上增加自定义的按钮，但是普通的监听操作不会阻止默认的监听事件，如下方法可以实现阻止默认的监听事件仅触发自定义的点击事件，效果如下。一、具体代码实现 div class=“layui-fluid”> 这是一个layui折叠面板点我阻止冒泡这里是折叠面板的内容

参与评论您还未登录，请先登录后发表或查看评论

阻止事件冒泡和事件捕获的方法及vue事件修饰符的使用

最新发布

SSophia的博客

08-15

1386

通过使用event.stopPropagation()方法，可以阻止事件传播（事件冒泡和事件捕获），通过event.preventDefault()方法，可以阻止事件的默认行为。

js中阻止事件冒泡的方法

java 帝国

08-02

446

如果两个相互嵌套的js节点同时注册有相同的事件的话，便会同时出发两个事件，可是往往需要的是一个节点的事件触发，可以阻止事件冒泡，仅仅出发一个函数。例子如下： 1. 对于原生的JS function stopBubble(e){ if (e && e.stopPropagation) e.stopPropagation() else ...

JavaScript 阻止事件冒泡的方法

我的博客

09-18

575

[size=medium]JavaScript停止冒泡和阻止浏览器默认行为事件兼容[/size] [code="js"] function myfn(e){ var evt = e ? e:window.event; } [/code] [size=medium]js停止冒泡[/size] [code="js"] function myfn(e){ w...

js阻止事件冒泡

李观杰的博客

10-16

528

阻止js事件冒泡方法方法一 // callback function(){ return false； } 方法二 // callback function(e){ e = e || event; /* e.stopPropagation() // 该方法只阻止一次时间冒泡并且ie不支持 e.cancelBubble=true;//ie的取消冒泡 ...

JS冒泡事件的快速解决方法

10-26

JavaScript中的冒泡事件是事件处理中的一个关键概念，它源于事件在DOM（文档对象模型）层级中的传播方式。当一个事件（如鼠标点击）在某个元素上触发时，该事件不仅会在该元素上执行，还会逐级向上层元素传播，直到...

vue 之事件修饰符阻止事件冒泡 .stop .prevent .capture .self .once

夜阑珊妖妖

11-21

973

弹层，点击空白处隐藏； <div class="tanceng" @click="blank"> <div class="main" @click.stop>  <p class="btn" @click="btn">提交</p> </div> </div> 问题：点main ...

JS中mouseup事件丢失的原因与解决办法

01-19

前言当实现类似Excel选中区域的功能时，经常出现 mouseup 事件丢失的情况，由于缺少了 mouseup 事件，导致一个完整的操作无法进行。如果你是想进行拖拽移动操作，也可以...//阻止事件冒泡 //不仅仅要stopPropagatio

解决 layui 行监听与行工具时间冒泡冲突

weixin_38564268的博客

02-10

1955

这是一种投机取巧的方式，因为用了layui.stope(event) 等方式不行，所以用了这个。原理就是判断被点击的元素的第一个类是不是layui-table-cell 来判断是不是表内单元格。 if("layui-table-cell" != event.target.classList[0]){ return false; } ...

解决layui动态添加的元素click等事件触发不了的问题

12-13

在页面加载完成时候 ‘.add_project’ 元素是可以触发click时间的，当动态添加 ‘.add_project’ 时候，新添加的元素却触发不了click事件，类似下面的写法： $(".add_project").on('click', function(){ alert('1') }); 解决办法很简单，就是用全局的document来监控 ‘.add_project’ 元素，如下： $[removed]("click",".add_project",function(){ alert('1'); }) 这样就很好的解决了问题了。以上这篇解决layui动态添加的元

js阻止冒泡及jquery阻止事件冒泡示例介绍

10-26

JQuery 提供了两种方式来阻止事件冒泡，Jquery阻止默认动作即通知浏览器不要执行与事件关联的默认动作，下文有个不错的示例，需要的朋友可以参考下

阻止事件冒泡和默认行为，禁止键盘事件

weixin_30568591的博客

06-26

351

阻止事件冒泡： function(e){ e = e || window.event; if (e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true; } 取消事件默认行为： function(e) { e = e || window.event; if(e.preve...

前端冒泡阻止方法

春来草青

06-15

835

关注下方微信公众号，免费获取海量电子书资源（关注公众号，点击电子书，获取下载链接）组织冒泡的方法 1、w3c标准方法：event.stopPropagation() 2、IE则使用：event.cancelBubble=true 3、兼容性写法 1 if(event&& event.stopPropagation) 2 { ...

layui table 复选框监听时发生行单击冒泡事件的解决办法

weixin_38404507的博客

04-24

3286

我遇到的问题是这样： table中开启了复选框和行单击事件，但是点击复选框的时候会先执行单击事件（单击后跳转查看邮件详情）。这个问题很让我头疼，在社区查了很久，有人提到了使用stope(e)或者event.stopPropagation()来阻止冒泡，但是在这里根本行不通啊！因为 row() 中并没有提供event参数啊！我只好妥协，将row事件换成rowDouble事件，但是双击查看详情确实很...

Layui Table组件-行事件(row)和工具栏事件(tool),因事件冒泡冲突问题的解决方法.

weixin_44005347的博客

01-25

2454

因工作原因使用Layui进行前端页面的开发工作,在使用Layui的Table组件时会遇到行事件(row)和工具栏事件(tool)同时使用的情景, 可触发 tool 事件时会冒泡到 row 事件上, 会触发 row 事件相应的逻辑. 因为点击工具栏时也相当于点击了行, 结合源码知道, 当 row 加入data-off="true"时可以防止事件冒泡. ...

阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return fal的区别...

weixin_33774615的博客

11-11

1868

今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开， 2.event.preventDefault()方法这是阻止默认事件的方法，调用此方法是，连接不会被打开，...

学习layui

weixin_30662849的博客

06-09

276

-----初识layui Layui兼容除IE6/7以外的全部浏览器，并且绝大多数结构支持响应式；获得layui后，将其完整地部署到你的项目目录（或静态资源服务器），你只需要引入下述两个文件： ./layui/css/layui.css ./layui/layui.js 我们更推荐你遵循Layui的模块规范，建立一个自己的模块作为入口： <scri...