- 综合排序
- 最热优先
- 最新优先
- 来自专栏授客的专栏
Vue 阻止事件冒泡
Vue 阻止事件冒泡 by:授客 QQ：1033553122 开发环境 Win 10 element-ui "2.8.2" Vue 2.9.6 事件冒泡简介 如下图，当我们点击页面某个元素时，会产生点击事件 ，事件由外到内，逐层递进（事件捕获阶段，途中的1->2->3->4），当目标元素捕捉到目标事件时，会响应事件，并由内到外，逐层往外传递(事件冒泡阶段，图中的4->5->6->7)，这便是事件冒泡。 正式因为冒泡机制，当用户点击图中目标元素div时，5,6,7事件区的元素都会响应点击事件（如果具备响应事件能力的话） ? 结论 综合实验1,2,3可知，如果想阻止哪个元素的事件冒泡（即事件只针对该元素有效），只要给该元素的事件增加.stop修饰符即可。 v-on:event，vue事件绑定的两种格式。
4K10发布于 2020-06-23 - 来自专栏陶士涵的菜地
vue.js中实现阻止事件冒泡
当父子元素中都有点击事件的时候，为了让触发子元素中的事件时，不去触发父元素中的事件，可以在子元素事件中添加stop来阻止事件冒泡。 .stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件 .prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交 .self 是只有是自己触发的自己才会执行 ,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号 .capture 是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式 .once 是将事件设置为只执行一次,如 .click.prevent.once 阻止click事件冒泡(防止触发另一个事件)的方法 使用vue阻止子级元素的click事件冒泡。 方法二 可以自己写个阻止冒泡事件 然后在发生冒泡的元素中调用这个事件 @click="_stopPropagation($event)" methods：{ _stopPropagation
7.8K10编辑于 2022-10-31 - 来自专栏小孟开发笔记
uniapp阻止事件冒泡
在uniapp项目中，经常会遇到父元素有一个点击事件，其子元素也有一个点击事件，但我们只想触发子元素事件，可是父元素也跟着触发了。 我们这时需要给子元素加上阻止事件冒泡就行了 <view @click="myParent()"> //子元素方法 <view @click.stop="mySon()"></view> </view> @click.stop 就是阻止事件冒泡的写法 未经允许不得转载：肥猫博客 » uniapp阻止事件冒泡
4.2K20编辑于 2023-03-07 - 来自专栏李维亮的博客
事件冒泡 ，阻止事件冒泡 e.stopPropagation()
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>阻止冒泡</title> <script src="script function (e) { alert("我是div"); }) //e.stopPropagation();就是阻止冒泡 因为已经被阻止了。 在上面的函数中，先弹出 “我是li”然后弹出“我是ul”，最后弹出“我是div” 一层一层的冒泡，而阻止冒泡的方式就是调用 事件的对象来调用stopPropagation()方法。 ： 1.一个事件起泡对应触发的是上层的同一事件 单击two的时候就会起泡触发one单击的事件。
2.7K30发布于 2021-07-09 - 来自专栏smy
事件委托与阻止冒泡
简单说下事件委托与阻止冒泡 html:
-
<li class="active_sort_opts" data-id $("ul[data-type='cityPick']").on('click','li',function(){
alert("子元素li被点击");
});
当点击具体的li元素时，发现ul的事件也被触发了 ("父元素ul被点击");
});
$("ul[data-type='cityPick']").on('click','li',function(e){
e.stopPropagation();//阻止冒泡 alert("子元素li被点击");
});
加一句阻止冒泡即可。
2.3K100发布于 2018-04-03 - 来自专栏Czy‘s Blog
JS事件冒泡及阻止
事件冒泡及阻止 当一个元素接收到事件的时候，会把他接收到的事件传给自己的父级，一直到window，当然其传播的是事件，绑定的执行函数并不会传播，如果父级没有绑定事件函数，就算传递了事件，也不会有什么表现 DOCTYPE html> <html> <head> <title>JS事件冒泡及阻止</title> </head> <style type="text/css"> div{ DOCTYPE html> <html> <head> <title>JS事件冒泡及阻止</title> </head> <style type="text/css"> li{ 有时候我们并不希望事件冒泡而去执行上级节点绑定的事件，这时候就需要阻止事件的冒泡，w3c的方法是e.stopPropagation()，IE则是使用 window.event.cancelBubble 阻止冒泡并不能阻止对象默认行为，例如submit按钮被点击后会提交表单数据，需使用e.preventDefault();阻止默认行为，IE则是window.event.returnValue = false
7.7K20发布于 2020-08-27 - 来自专栏web前端踩坑
Echarts鼠标事件阻止冒泡
类似弹窗遮罩的实现方式，我们通常会在容器元素上绑定一个点击事件，然后设置里面的子元素的点击事件阻止冒泡即可。 '#main>div'); oDiv.onclick = function() { //body ... } 二、解决方案探索 按照上面的分析，接下来我们只需要对扇形的点击事件做阻止冒泡就好了 相当于是要阻止饼图点击事件的冒泡。 关联文章： Echarts柱状图点击事件（阻止冒泡） 采用myChart.off('click')。网路上输入echarts 阻止冒泡，出来很多这个解决方案的文章。 echarts鼠标事件阻止冒泡 采用param.event.event.stopPropagation()。这也是我一开始要采用的阻止冒泡方法，最初也是不知道怎么获取window.event。
5.3K30发布于 2020-11-05 - 来自专栏Devops专栏
jquery 事件冒泡、阻止事件冒泡 - event.stopPropagation()
事件冒泡的作用 事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。 事件冒泡的示例 编写三个嵌套的div，同时绑定click事件，来演示事件冒泡。 ? 事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止 阻止上面点击黄色div的click()冒泡传递 ? 设置了阻止冒泡传递之后，那么click()事件就不会传递到father和grandfather的事件，所以只有一个alert()弹出。 完整事件冒泡示例代码 <! ： return false; 好，下面将阻止事件冒泡的方法写成return false;来看看。
7K41发布于 2019-06-02 - 来自专栏全栈程序员必看
javascript 怎么阻止事件冒泡
1.停止事件冒泡 //如果提供了事件对象，则这是一个非IE浏览器 if (e && e.stopPropagation) { //因此它支持W3C的stopPropagation ()方法 e.stopPropagation(); } else { //否则，我们需要使用IE的方式来取消事件冒泡 window.event.cancelBubble = true; return false; } 2.阻止事件默认行为。 //如果提供了事件对象，则这是一个非IE浏览器 if (e && e.preventDefault) { //阻止默认浏览器动作(W3C) e.preventDefault (); } else { //IE中阻止函数器默认动作的方式 window.event.returnValue = false;
3.1K10编辑于 2022-11-15 - 来自专栏农历七月廿一
vue的阻止事件冒泡.stop的使用场景
什么是事件冒泡 说人话就是你点击了一个东西，但是同时触发了这个东西所依附的东西，说的比较官方的话就是如果子元素和父级元素触发的是相同事件的时候，当子元素被触发的时候父元素也会被触发冒泡机制，这就是冒泡的基本原理 有多恶心 举个例子，你在一个span或者一个什么元素上面写了一个事件，这个时候你准备点击这个元素的时候展示给你的女朋友一个好看的画面，然后这个元素上面还有别的按钮，这个时候你希望的是你的对象点击按钮没有任何的反应 ，只有点击除了这个按钮之外的地方才出现这个好看的页面，结果你没有考虑冒泡事件，写好了， 给你的女朋友，就下面演示的这样了！ 为什么我可以有对象，因为我是下面这么写的 阻止冒泡的写法 <template>
<common-back :currPage='currPage'> </common-back 是不是非常的哇塞，这样写就不会出现点击按钮也会触发div事件的情况了！ 我一直觉得只有demo展示出来才可以直接说明问题所在，我这样想的，也是这样做的，希望可以帮助你们理解！1.2K10发布于 2020-05-28来自专栏搞前端的李蚊子阻止冒泡和阻止默认事件的兼容写法
//阻止冒泡的兼容性写法 function stopBubble(event){ var e=arguments.callee.caller.arguments[0]||event; if e.stopPropagation() }else if(window.event){ window.event.cancelBubble=true; } } //阻止浏览器默认行为的兼容性写法 function stopDefault(event){ var e=arguments.callee.caller.arguments[0]||event; //阻止默认浏览器动作( W3C) if(e&&e.preventDefault){ e.preventDefault(); }else{ //IE中阻止函数默认动作的方式
3.7K81发布于 2018-03-14来自专栏前端专栏JS事件流、事件冒泡、阻止冒泡、事件捕获（一看就懂）
讲 事件冒泡 、阻止冒泡 和 事件捕获 之前先说说什么是事件流，这样会更容易明白 一、事件和事件流 1、什么是事件 事件是可以被 JavaScript 侦测到的行为。 二、事件冒泡 看了上面的那张图应该对事件冒泡有了大概的了解了吧。总结来说就是： 当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window。 三、阻止冒泡 1、JS阻止事件冒泡 我们用 e.stopPropagation() 这个方法添加到某事件函数里的末尾，就可以做到阻止冒泡事件。 } else { e.cancelBubble = true; //IE阻止冒泡方法 } } </script> 在child（区域①） 2、JQ阻止事件冒泡 jq阻止事件冒泡就简单了，直接在事件函数里面添加 return false; 就行了。
21.8K64编辑于 2022-06-09来自专栏菩提树下的杨过as3.0中如何阻止事件冒泡?
as3.0中的事件冒泡机制有时候会很烦人，比如一个Sprite(方便下文描述就命名为Container吧)把另一外Sprite(称为Child吧)做为子元素套进来以后，如果两个Sprite都注册了Mouse_Down 事件，要想在Child上点击鼠标时系统只响应Child的Mouse_Down事件，默认是不行的，因为事件冒泡会让Container也响应Mouse_Down事件，示例代码： package { import } } 鼠标点击最小的矩形后，输出如下： _sub_child.MOUSE_DOWN _child.MOUSE_DOWN _container.MOUSE_DOWN 相当于点一个，触发了三个，要想阻止事件冒泡 stopPropagation():void 防止对事件流中当前节点的后续节点中的所有事件侦听器进行处理。 ，stopPropagation将把该事件注册的所有监听处理函数执行完后，再阻止该事件继续向上冒泡；而stopImmediatePropagation方法将本次处理函数执行完后就立即阻止事件继续向上冒泡
1.9K60发布于 2018-01-23Vue3 事件冒泡踩坑实录：5种实用的阻止冒泡方案
在 Vue3 项目开发中，事件冒泡经常会导致一些意想不到的问题。比如点击子元素时，不小心触发了父元素的事件，或者在弹窗组件中点击内容区域却意外关闭了弹窗。一、什么是事件冒泡？ 父元素被点击')}const handleChildClick = () => { console.log('子元素被点击')}</script>点击子元素时，控制台会输出：子元素被点击父元素被点击二、5种阻止事件冒泡的方法 event.preventDefault() event.stopPropagation() console.log('子元素被点击')}</script>三、注意事项1.不要过度使用：并非所有事件都需要阻止冒泡 2.性能考虑：在大量元素需要阻止冒泡时，建议使用事件委托方式处理。3.调试技巧：如果发现事件处理异常，可以通过 console.log(event) 查看事件对象，帮助定位问题。 return true}</script>总结在 Vue3 中处理事件冒泡有多种方式，关键是要根据具体场景选择合适的方案。
3.1K10编辑于 2024-11-29来自专栏快乐阿超vue阻止默认事件
click触发这个函数的时候 发现折叠面板也被折叠了 试了好几种办法都不行 结果后来在前端同事的帮助下习得了一个妙招 只需要把@click改成@click.stop就行了 @click.stop是停止冒泡
3.1K20编辑于 2022-08-16来自专栏web秀原生JavaScript和Vue、小程序都是如何阻止事件冒泡的？
，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转） return false 事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转） event.preventDefault () 事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转） Vue解决事件冒泡 Vue.js为v-on提供了 事件修饰符，我们只需要添加click.stop即可防止事件冒泡 -- 阻止单击事件冒泡 --> <! 小程序解决事件冒泡 <view bindtap='tap'> <view id='5' catchtap='catTap'></view> </view> bind事件绑定不会阻止冒泡事件向上冒泡， catch事件绑定可以阻止冒泡事件向上冒泡。
2.1K40发布于 2019-09-04来自专栏移动大前端JS示例36-如何阻止事件冒泡
'block'; var oEvent = ev || event; oEvent.cancelBubble = true; // 取消事件冒泡
5.5K20发布于 2019-11-07来自专栏Devops专栏jquery - 页面弹框 - 阻止事件冒泡示例
解决#btn的事件冒泡，使用return false; ? 在阻止了#btn按钮的click()事件冒泡到$(document)之后，那么弹框就可以正常显示了。 阻止.pop弹框的click()事件，直接return false，就可以避免点击弹框的时候执行$(document).click()里面的fadeOut()事件 ? 这个思路不涉及事件冒泡的阻止，但是属于同一个click()方法的阻止，因为点击$(document)的click()事件应该不会冒泡到它下面的元素.pop，不过可以在这里验证一下。 在这个验证的过程中，更加确认了刚才在.pop使用return false;的确是用来阻止click()的冒泡至$(document)的。 写到这里基本已经演示完了关于事件冒泡的弹框示例了。 完整代码 <!
4.1K10发布于 2019-05-30来自专栏Java架构师必看JQuery IE下如何阻止keydown事件冒泡
2.解决思路: 比如可以把button换掉；阻止keydown事件的默认行为preventDefault等。 3.举例说明: 1.阻止浏览器的默认行为 function stopDefault(e) { if(e && e.preventDefault) { //如果提供了事件对象，则这是一个非IE 浏览器 e.preventDefault(); //阻止默认浏览器动作(W3C) } else { //IE中阻止函数器默认动作的方式 window.event.returnValue = false; } return false; } 2.停止事件冒泡 function stopBubble 的stopPropagation()方法 } else { //否则，我们需要使用IE的方式来取消事件冒泡 window.event.cancelBubble = true;
2K30发布于 2021-05-27
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号