ElementUI dropdown触发显示时阻止事件冒泡

了不起的码农

于 2025-03-25 18:46:05 发布

阅读量327

点赞数 3

文章标签： elementui vue.js 前端

本文链接：https://blog.csdn.net/Abyy5412/article/details/146509849

版权

我们设法一个场景：如果el-tree自定义节点包含el-dropdown，为了防止点击el-dropdown的触发按钮而执行el-tree的node-click事件。

实现：

最外层添加div，给div绑定事件并添加事件修饰符（stop）

图片中的代码，可以复制下来去用。好了，今天的文章就到这里了，还有疑问的话可以留言一起探讨哦~

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

了不起的码农

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue3 - Element Plus 下拉菜单 el-dropdown 阻止冒泡传递到上层触发事件，解决 dropdown 下拉菜单组件被容器元素包裹时点击事件触发，会连带触发外层包裹容器的点击事件

王二红

02-27

3088

vue3，elementplus，el-dropdown，stop，command，使用.stop无效，下拉菜单组件，下拉菜单Dropdown，点击事件冒泡，@command如何绑定stop修饰符，阻止事件冒泡，使用el-dropdown下拉菜单阻止事件冒泡，阻止了点击事件冒泡，触发了父元素怎么办，click点击时带动了外层元素的点击事件咋办，如何解决vue3使用下拉菜单组件时，点击触发方式会连同上层div同时触发click点击，elementplus组件自带的事件如何阻止其冒泡，阻止内层冒泡，将dro

element的Dropdown 下拉菜单阻止事件冒泡

weixin_45663264的博客

09-18

5189

<div style="display: inline-block;" @click.stop> <el-dropdown size="mini" split-button type="primary"> 修改状态 <el-dropdown-menu slot="dropdown"> <el-d..

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

Element阻止 el-dropdown、el-switch等冒泡事件

Mo_Mit的博客

01-23

1028

当el-switch、el-dropdown等存放在父元素中，且父元素有点击事件时，触发组件时会一同触发父元素中的点击事件。可以给组件再套一个元素，并给该元素施加@click.stop，以此来避免事件冒泡。

element ui 组件阻止冒泡行为

young_sam的博客

03-28

4036

代码 <el-table @row-click="handleRowClick" > <el-table-column align="center" label="数量" > <template slot-scope="scope"> <div @click.stop> <el-input-number v-model="scope.row.

[element-ui] el-dropdown 触发显示时阻止事件冒泡 .stop

最新发布

qq_14993591的博客

08-19

690

如果el-tree自定义节点包含el-dropdown，为了防止点击el-dropdown的触发按钮而执行el-tree的node-click事件。

Element ui组件库的Table表格阻止了点击事件冒泡

gzy07011的博客

12-14

784

在表格中操作一列有删除，给删除按钮注册了点击事件，但是同时还给表格的每一行注册了点击事件（项目需要在点击每一行时跳转到对应的动态路由地址），之后就发生了在点击删除按钮时，不仅触发删除按钮绑定的点击事件，还触发了表格当前这一行的点击事件(跳转)。事件修饰符，阻止了点击事件冒泡，这样在点击删除按钮时就不会触发行点击事件了。使用的是Element ui组件库的Table表格。方法中可以处理相应的删除逻辑。我们在删除按钮上使用了。

Vue iview Selece下拉框内部套用Radio 点选按钮（change阻止默认事件问题）

c_x_m的博客

03-09

1027

主要问题点：Select 和 Radio组件的均为change事件，如何阻止冒泡

阻止 el-dropdown、el-switch冒泡事件

u010227042的博客

05-19

1395

亲测可用，若有疑问请私信需求：通过点击el-table每行的数据，进行勾选。但是不希望点击表格内按钮的时候也触发。因此要阻止这些按钮的冒泡事件。解决方案：加个span标签，然后在标签上使用 @click.stop="" <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible"> <template slot-scope="sco...

Element Plus阻止 el-dropdown、el-switch等冒泡事件

YUSIR 完美CODING世界

10-13

2204

问题点：组件中遇到事件冒泡问题了，el-checkbox 中 @change事件要求阻止冒泡，如下代码中要求点击checkbox时不调用li标签的show方法。在el-checkbox 中用 @change.stop 发现不起作用，报错，没有相关方法，坑死。给元素包一层父元素，父元素上使用@click.stop，阻止事件冒泡。最近做vue3项目，使用Element Plus,又遇到坑了！使用vue3的事件修饰符报错。其他el组件也一样处理。

＜el-dropdown/＞阻止事件冒泡

qq_37844543的博客

05-14

873

element el-tree直接行内编辑时阻止冒泡触发node-click事件

liu18130617928的博客

07-25

1万+

这样点击操作按钮的时候和input框获取焦点的时候都不会冒泡了

elementui复选框checkbox阻止事件冒泡（折叠面板标题中增加复选框，阻止点击复选框折叠面板展开/折叠）

lingliu0824的博客

12-31

4533

需求：在折叠面板的标题前面加上复选框，可以选中当前数据问题：点击复选框时，折叠面板会展开又折叠解决：设置复选框的点击的事件冒泡，注意不是设置change事件的事件冒泡@click.stop.native="()=>{}" <el-collapse-item :title="item.settingName" v-for="item in list" :key="item.settingId" > <te

elementui的组件自带的点击事件怎么防止事件冒泡

xxitcef的博客

08-06

1万+

vue中阻止事件冒泡是需要在click点击事件加上.stop就可以， <div @click=""> 父级 <div @click.stop="">子级</div> </div> 在使用element ui时，组件有很多自带的点击事件，要阻止事件冒泡就需要在组件外层套一个div，然后同样的加上@click.stop就好了 <div @click.stop> <el-dropdown></el-dropdown>

Element UI - 解决部分组件无法阻止冒泡问题

陆克和他的那些代码

11-12

4573

问题背景部分组件无法阻止冒泡，比如说 “el-switch” 等等。解决方案只要在该组件外面套个 div，div 上写 @click.stop 即可。

Vue中的event阻止事件冒泡、默认事件

mm_hello11的博客

10-04

9369

vue的事件对象： @dragstart=’drag(event)′，在函数中传evevt ，函数中接收一下，事件对象就有了。 <div class="select-item" draggable='true' @dragstart='drag($event)' v-for="item in items">{{item.name}} //传输事件对象 </div&gt...

antd的Dropdown组件阻止事件冒泡