vue外层div上有点击事件，内层div也有点击事件，想要实现点内层div，不触发外层点击事件

最新推荐文章于 2025-04-08 17:16:55 发布
原创 最新推荐文章于 2025-04-08 17:16:55 发布
· 3.8k 阅读 · 2 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js

在Vue中，当外层div和内层div都绑定了点击事件时，可以通过`@click.stop`指令防止事件冒泡，避免内层点击触发外层事件。此外，使用JavaScript时，可以分别在内层div的onClick事件中调用`event.cancelBubble=true`或`event.stopPropagation()`来达到相同效果。

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

vue外层div上有点击事件，内层div也有点击事件，想要实现点内层div，不触发外层点击事件

vue有个属性是@click.stop

如果只是想用js来实现：

子级div上增加一个事件 onClick="event.cancelBubble = true"
或者 onClick="event.stopPropagation()"
阻止了冒泡，所以不会触发外层的div事件

Vue3 - Element Plus 下拉菜单 el-dropdown 阻止冒泡传递到上层触发事件，解决 dropdown 下拉菜单组件被容器元素包裹时点击事件触发，会连带触发外层包裹容器的点击事件
王二红
02-27 3166
vue3，elementplus，el-dropdown，stop，command，使用.stop无效，下拉菜单组件，下拉菜单Dropdown，点击事件冒泡，@command如何绑定stop修饰符，阻止事件冒泡，使用el-dropdown下拉菜单阻止事件冒泡，阻止了点击事件冒泡，触发了父元素怎么办，click点击时带动了外层元素的点击事件咋办，如何解决vue3使用下拉菜单组件时，点击触发方式会连同上层div同时触发click点击，elementplus组件自带的事件如何阻止其冒泡，阻止内层冒泡，将dro
vue内父子组件通信、事件传递及多层嵌套组件如何传递事件
weixin_41993525的博客
11-03 7142
父子组件通信 父组件向子组件传值 - props 组件A <template> <div> <b :option="option"></b> <div> </template> <script> import B from "b"; export default { components:{ B }, data(){ return { option:[] } } } </script&
vue click.stop阻止点击事件继续传播的方法
10-18
今天小编就为大家分享一篇vue click.stop阻止点击事件继续传播的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在Vue中如何不处理内部元素触发的事件？
重楼的博客
10-07 897
在Vue中如何不处理内部元素触发的事件？方法一 事件修饰符.self方法二 事件修饰符.stop方法三 event.target 方法一 事件修饰符.self <div class="mask" @click.self="close"> <div class="mask-content"></div> </div> 方法二 事件修饰符.stop <div class="mask" @click="close"> &lt
问题：vue点击弹框外部触发事件，与弹框内部el-select事件冲突
最新发布
zhuy2012的专栏
04-08 379
解决办法：v-click-outside指令将el-select下拉框区域识别为弹框外部，修改定义指令，把。还参考了某位大佬的文章，但是找不到链接了，如有侵权，请联系删除或者添加署名。问题：点击弹框内部el-select下拉框选择事件，会关闭弹框；需求：点击弹框外部任意位置关闭弹框；
vue外层div上有点击事件，内层div也有点击事件，想要实现点 内层div，不触发外层点击事件（综合一下记录）
Winsom1的博客
06-15 5412
综合笔记，感谢原作者
JQuery实现点击里层div事件，不触发外面的div的点击事件
u013954206的博客
03-03 4071
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JQuery实现点击里层div事件，不触发外面的div的点击事件</title> </head> <body> <div id="outter" styl...
阻止上层div触发点击事件，并触发下层div的点击事件
nayi_224的博客
12-19 6198
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div onclick="aa(1);" style="width: 200px;height: 20...
如何实现让最上面的图层不影响下面图层的点击事件（可穿透图层的鼠标事件）
mkijnbgt的博客
08-16 2066
如何实现让最上面的图层不影响下面图层的点击事件（可穿透图层的鼠标事件）
在vue中实现点击选择框阻止弹出层消失的方法
10-18
在Vue中，事件会从最外层元素向内层元素传播，这就是事件冒泡。当用户点击弹出层内的选择框时，点击事件会依次传递到父级元素，导致父级监听的事件（通常是关闭弹出层）被触发。为了解决这个问题，我们需要阻止事件...
Vue 中阻止点击事件穿透
qq_44977477的博客
09-12 3490
在 Vue.js 应用中，处理用户交互是常见的需求，尤其是点击事件。然而，在某些情况下，我们可能需要阻止点击事件穿透到下层元素，这可以优化用户体验并防止不必要的事件处理。本文将探讨在 Vue 中如何有效地阻止点击事件穿透，并提供实用的代码示例。
vue中div外部有点击事件，内部有change事件如何阻止内部冒泡事件
cherry_zhang18的博客
04-24 894
change阻止不了冒泡，只能使用click的$event.stopPropagation()处理。解决如上图，因为el-checkbox没有自带click，需要使用@click.native，
阻止div的点击事件冒泡
weixin_66196770的博客
06-09 559
我的想法💡：点击内层的div我要执行自己内层div的change事件，但是不要触发外层div的点击事件。解决办法：一行代码搞定 onClick="event.cancelBubble = true"inactive-text="公开"active-text="隐私"情景：两个div是嵌套关系，大的div包住小的div。简单百度了下，发现是由于事件冒泡原因导致的。
一个div盒子，两个点击事件，互不干扰，可以使用阻止事件冒泡
新人一枚，互相学习哦！
07-24 1628
阻止事件冒泡
JS 点击某元素以外的地方触发事件
weixin_42333548的博客
01-16 2548
本来就只是使用e.target就行了，但是点击事件的target的机制问题，单纯地使用e.target并不能根本解决这个问题，因为目标区域内可能有很多的元素，这个点击事件会选择其内部的元素，就举当前的html代码为例子，现在我的目标区域demo内有一个p标签，如果我点到这个p标签，e.target会指向这个p标签，而不会去指向这个demo元素。点击颜色画板之外的区域，隐藏颜色画板。这个功能多用于关闭自己设置的弹窗，设置好最外层的判断元素，点击弹窗之外，弹窗就会关闭，这个在用户体验方面是非常有利的一个功能。
vue 触发内部元素的点击事件但不触发外部元素点击事件（阻止冒泡）
qq_45560350的博客
04-26 5569
https://www.jb51.net/article/175671.htm https://www.cnblogs.com/dongyuezhuang/p/11527447.html
禁用外层div点击事件
qq_41353397的博客
09-05 303
$(document).on('click', '.divClass', function(e) { e.stopPropagation(); });
vue中阻止click事件冒泡,防止触发另一个事件的方法
Misnice的博客
04-24 2155
使用vue阻止子级元素的click事件冒泡，不用触发父级元素的点击事件，用stop 1 2 3 4 <div @click="test1()"> <div@click.stop="test2()">按钮</div> </div> 这样点击按钮，就不会触发父级...
JS阻止事件冒泡
lch901004的博客
11-13 317
平常做网页用到JS的时候往往希望里层事件不去干扰外层事件，所以要阻止里层事件的冒泡。 处理方法如下： 有两个方法，第一个是外层DIV的事件，第二个是里层DIV的事件 function hidemenu() { var d = document.getElementById("menu"); d.style.display="none"; } function showmenu()
router-view点击事件
02-22
为了实现对整个视图区域内的点击事件监听，可以采用包裹一层容器的方式，并在此容器上设置点击事件处理器： ```html <div id="app"> <!-- 使用 div 包裹 router-view --> <div @click="handleClick"> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值