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

原创 已于 2022-05-31 15:04:25 修改 · 915 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#elementui #vue.js

于 2022-05-14 14:49:06 首次发布
本文将深入剖析在现代前端项目中，如何利用Element UI的el-dropdown组件与Vue.js集成，实现优雅的用户界面。 

<div @click.stop>
<el-dropdown></el-dropdown>
</div>

Vue3 - Element Plus 下拉菜单 el-dropdown 阻止冒泡传递到上层触发事件，解决 dropdown 下拉菜单组件被容器元素包裹时点击事件触发，会连带触发外层包裹容器的点击事件
🏆 前端领域优质创作者
02-27 3646
vue3，elementplus，el-dropdown，stop，command，使用.stop无效，下拉菜单组件，下拉菜单Dropdown，点击事件冒泡，@command如何绑定stop修饰符，阻止事件冒泡，使用el-dropdown下拉菜单阻止事件冒泡，阻止了点击事件冒泡，触发了父元素怎么办，click点击时带动了外层元素的点击事件咋办，如何解决vue3使用下拉菜单组件时，点击触发方式会连同上层div同时触发click点击，elementplus组件自带的事件如何阻止其冒泡，阻止内层冒泡，将dro
阻止 el-dropdown、el-switch冒泡事件
树上骑个猴的博客
01-12 2614
需求： 通过点击el-table每行的数据，进行勾选。但是不希望点击表格内按钮的时候也触发。因为要阻止这些按钮的冒泡事件。 解决方案： 加个span标签，然后在标签上使用 @click.stop="" <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible"> <template slot-scope="scope">
[element-ui] el-dropdown 触发显示时阻止事件冒泡 .stop
qq_14993591的博客
08-19 842
如果el-tree自定义节点包含el-dropdown，为了防止点击el-dropdown的触发按钮而执行el-tree的node-click事件。
element的Dropdown 下拉菜单阻止事件冒泡
weixin_45663264的博客
09-18 5335
<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 1192
当el-switch、el-dropdown等存放在父元素中，且父元素有点击事件时，触发组件时会一同触发父元素中的点击事件。可以给组件再套一个元素，并给该元素施加@click.stop，以此来避免事件冒泡。
<el-dropdown @command="handleCommand"> <div class="addPointBox">+添加重点观察对象</div> <template #dropdown> <el-dropdown-menu style="width:586px"> <el-dropdown-item command="a">选项 1</el-dropdown-item> <el-dropdown-item command="b">选项 2</el-dropdown-item> <el-dropdown-item>选项 3</el-dropdown-item> <el-dropdown-item>选项 4</el-dropdown-item> <el-dropdown-item>选项 5</el-dropdown-item> <el-dropdown-item>选项 6</el-dropdown-item> <el-dropdown-item disabled>选项 7</el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown>这个能不能实现多选
10-25
<think>嗯，用户的问题是关于Element UI的el-dropdown组件是否能实现多选功能。从用户提供的引用内容来看，用户已经尝试过一些解决方案，但遇到了事件冒泡和动态渲染的问题。 用户特别提到引用[1]中关于多选菜单的...
<el-table-column prop="dataFrom" label="市" width="120"> <template slot="header"> <el-dropdown> <span class="el-dropdown-link"></span> <template #dropdown> <el-select style="width: 85%;margin-left: -15px;" size="mini" v-model="queryParams.cityId" filterable collapse-tags placeholder="市" clearable @change="handleCommand"> <el-option v-for="city in cityList" :key="city.id" :label="city.title" :value="city"/> </el-select> </template> </el-dropdown> </template> <template slot-scope="scope">{{ scope.row.cityId }}</template> </el-table-column>影响到其他下拉框点击事件
最新发布
10-31
如果是因为事件冒泡导致`el-table-column`内的点击事件影响到其他下拉框，可以使用`stop`修饰符阻止事件冒泡。 ```vue <template> <el-table :data="tableData"> <el-table-column label="操作"> <template slot-...
ElementUI dropdown触发显示时阻止事件冒泡
Abyy5412的博客
03-25 541
我们设法一个场景：如果el-tree自定义节点包含el-dropdown，为了防止点击el-dropdown的触发按钮而执行el-tree的node-click事件。图片中的代码，可以复制下来去用。好了，今天的文章就到这里了，还有疑问的话可以留言一起探讨哦~最外层添加div，给div绑定事件并添加事件修饰符（stop）
antd的Dropdown组件阻止事件冒泡
热门推荐
吴小迪的博客
07-30 4万+
笔者在开发的过程中遇到了使用Dropdown组件在点击事件的时候阻止事件冒泡。 阻止事件冒泡就是使用event对象的stopPropagation()方法。 Dropdown组件想要把每一个阻止事件冒泡就这样写： <Dropdown overlay={ <Menu> <Menu.Item onClick={eve => { // 修改要做...
el-dropdown 冒泡事件阻止
a666666000的博客
07-01 298
【代码】el-dropdown 冒泡事件阻止。
Element Plus阻止 el-dropdown、el-switch等冒泡事件
YUSIR 完美CODING世界
10-13 2531
问题点：组件中遇到事件冒泡问题了，el-checkbox 中 @change事件要求阻止冒泡，如下代码中要求点击checkbox时不调用li标签的show方法。在el-checkbox 中用 @change.stop 发现不起作用，报错，没有相关方法，坑死。给元素包一层父元素，父元素上使用@click.stop，阻止事件冒泡。最近做vue3项目，使用Element Plus,又遇到坑了！使用vue3的事件修饰符报错。其他el组件也一样处理。
Element ui组件库的Table表格 阻止了点击事件冒泡
gzy07011的博客
12-14 889
在表格中操作一列有删除，给删除按钮注册了点击事件，但是同时还给表格的每一行注册了点击事件（项目需要在点击每一行时跳转到对应的动态路由地址），之后就发生了在点击删除按钮时，不仅触发删除按钮绑定的点击事件，还触发了表格当前这一行的点击事件(跳转)。事件修饰符，阻止了点击事件冒泡，这样在点击删除按钮时就不会触发行点击事件了。使用的是Element ui组件库的Table表格。方法中可以处理相应的删除逻辑。我们在删除按钮上使用了。
vue之冒泡阻止
weixin_30367543的博客
06-19 612
用了Element ui写页面 <el-dropdown-menu slot="dropdown"> <el-dropdown-item> <el-select size="mini" v-model="searchInfo.plan" placeholder="请选择" > <el-option v-fo...
el-dropdown-item添加点击事件
weixin_53635194的博客
08-19 850
两种方案 一、使用官方给出的解决方案command指令（），我自己第一次使用时报错，索性就直接不用了； 二、使用@click.native 就可以成功的添加上点击事件； Ps：扩展@click的其他用法 @click.stop： 阻止事件冒泡； @click.prevent： 阻止事件的默认行为 （提交事件不再重载页面）； @click.capture： 优先触发； @click.self： 只有自己能触发，子元素无法触发； @click.once： 只能提交一次；
element自定义组件实现v-mode效果
czh4869623的专栏
11-22 1079
element自定义组件实现v-mode效果 element自定义组件实现v-mode效果
JS-事件委托-阻止事件冒泡和阻止默认行为-滚动事件-加载事件-元素尺寸位置
m0_62181310的博客
06-29 1237
目录1.事件委托2.阻止事件冒泡和阻止默认行为3.滚动事件4.加载事件5.元素尺寸和位置offset 家族client 家族scroll 家族 2.阻止事件冒泡和阻止默认行为 阻止冒泡是就让事件不再从子级向父级【传播】在事件回调函数中通过 ev.stopPropagation()一些标签自带了某些功能，比较典型的两个：a 标签 和 form 标签事件回调中的 ev.preventDefault()scroll 事件与 click input change keyup 等,没有什么本质上的区别。load
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值