如何防止el-switch点击后触发父亲div点击事件？防止冒泡？

已于 2022-03-24 17:02:18 修改
阅读量1.1k 收藏 3
点赞数 3
分类专栏： element-ui 文章标签： vue elementui
于 2022-03-24 17:02:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/AzeShinja/article/details/123715869
版权 
 <span @dblclick.stop.prevent
        @click.stop.prevent>
        <el-switch
         ...
        />
 </span>

在外面包裹一层span标签并给上阻止冒泡事件，我最初是想在组件上直接写事件，不知道为什么不生效。

所以采用了下下解， 多包了一层结构

Vue3 - Element Plus 开关组件 el-switch 首次加载或刷新页面时出现“自动执行一次change事件“问题，Switch开关初次加载会自动触发change，无法将值设为布尔值！
王二红
07-31 1万+
vue3，elementPlus，组件库，开关，el-switch，组件，Switch开关，change事件，switch状态发生变化时的回调函数，第一次就触发，就首次加载的时候触发一次，自动就执行了一次change，如何解决这个问题，把值改成true和false也不行，boolean布尔值，数值型，无法保证v-model是布尔值(true/false)，但又不能在里面写表达式怎么办，初次加载会自动执行change事件，第一次会加载或刷新会触发change的解决办法，三元表达式，表格table，还是不
前端面试题
liuhao9999的博客
11-30 809
单选题 JS基础 js概念与类型检测 以下不属于 typeof 运算符返回值的是？ A."string" B."function" C."object" D."null" 执行以下代码，错误的输出结果是 A. 输入：typeof {"x":1}输出："object" B. 输入：typeof 1 输出："number" C. 输入：typeof [{x:1}]输出："array" D. 输入：typeof NaN 输出："number" 可以用ty...
阻止el-switch事件冒泡
ZeBaBa的博客
09-15 1762
直接在el-switch的@change方法后加.stop 来进行阻止冒泡会报错。
前端中阻止事件冒泡的几种方法
qq_33894186的博客
04-23 528
在 JavaScript 前端开发中，阻止事件冒泡是处理 DOM 事件时的常见需求。
Element阻止 el-dropdown、el-switch等冒泡事件
Mo_Mit的博客
01-23 1037
当el-switch、el-dropdown等存放在父元素中，且父元素有点击事件时，触发组件时会一同触发父元素中的点击事件。可以给组件再套一个元素，并给该元素施加@click.stop，以此来避免事件冒泡。
elementui里面的switch怎样避免多次点击频繁问题
xcxcsdn的博客
10-15 602
放弃v-model，改为value绑定 上述代码在this.value = value后面增加你要调用后台的接口的代码
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>
JavaScript 系列笔记——DOM（贰）
浮幻的博客
08-10 1525
JavaScript 系列笔记——DOM，确定不点进来瞧瞧？
element:常见用法总结（前后台常见问题与自定义表单验证）
tomorrownan的博客
09-11 1719
后台给的状态是使用12345状态码表示的，前端要把它转成对应的状态文字。 这里使用element-ui的table为例，代码如下： <el-table-column label="审核结果" align="center"> <template slot-scope="scope"> <span v-if="scope.row.authStatus === ...
前端全套教程vue1天v-cloak的学习 跑马灯效果 事件修饰符v-model指令的学习简易的计算器vue中样式-class vue中样式 v-for v-if和v-show的使用
qq_35647460的博客
12-25 230
v-text v-cloak v-html v-bind v-on <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content=
JS DOM操作与事件处理从入门到实践
最新发布
m0_50296683的博客
05-10 863
这篇文章主要面向初中级开发爱好者，深入浅出地讲解了JavaScript如何通过DOM操作和事件处理赋予网页交互性。文章首先介绍了DOM（文档对象模型）作为HTML与JS沟通的桥梁及其树状结构。接着，详细演示了核心DOM操作：查询、创建、添加、修改（内容、属性、样式）和删除元素。随后，系统阐述了事件处理机制：包括事件监听器的绑定、强大的事件对象、事件流的捕获与冒泡，以及高效的事件委托模式。最后，文章总结了编写高性能、高可读性及易访问（a11y）代码的最佳实践。
element级联选择器父子不关联，点击子级父级禁用，点击父级子级禁用，但是要求点击子级时对应父级有样式标注
m0_49017085的博客
07-15 1812
要求对品类进行分级展示，父子级互不关联，点击父级，子级不可选，点击子级，父级不可选。但是要求点击子级时对应父级有样式标注
vue中渲染函数 阻止事件冒泡
HTML6549的博客
11-17 546
先搞清楚是那个事件的冒泡，这里是click点击事件，随便写一个参数，里面有他的原生阻止事假冒泡的方法，直接调用即可！
Element Plus阻止 el-dropdown、el-switch等冒泡事件
YUSIR 完美CODING世界
10-13 2243
问题点：组件中遇到事件冒泡问题了，el-checkbox 中 @change事件要求阻止冒泡，如下代码中要求点击checkbox时不调用li标签的show方法。在el-checkbox 中用 @change.stop 发现不起作用，报错，没有相关方法，坑死。给元素包一层父元素，父元素上使用@click.stop，阻止事件冒泡。最近做vue3项目，使用Element Plus,又遇到坑了！使用vue3的事件修饰符报错。其他el组件也一样处理。
element阻止checkbox的点击选中事件
weixin_43371136的博客
01-12 3154
就是等复选框渲染完后重新赋值
触发子元素的点击事件而不触发父元素的点击事件
langwang1993的博客
11-08 3173
&lt;div class="divone" onclick="divone(this)"&gt; &lt;div class="divchild" onclick="divchild(this)"&gt;&lt;/div&gt; &lt;/div&gt; function divone()
element 控件 tabel中增加el-switch 并绑定点击事件
kso的博客
03-25 4513
先看官网 <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"> </el-switch> <script> export default { data() { return { value: true } } }; </script> //change ：switch 状态发生变化时的
解决 el-switch 只能点击一次
Charltin的博客
05-30 854
出现问题 当我在表格里使用el-switch，每次都是点击一次后就不能点击了。 我是这么写的： <template> <el-switch v-model="value" active-color="#579ef8" inactive-color="#ccc"></el-switch> </template> data(){ return { value: true } } 然后我充满疑问对value进行了一个监听，这里我用的是 wat
vue中利用switch来写组件中的事件
qq_42423991的博客
01-14 1315
本人语言组织能力有限所以直接上代码,好懂 父组件 <template> <button @click='handleEvent('click1','123')'></button> <Son></Son> </template> <script> improt Son from './son' export default{ name 'father', components:{Son}, method:{ handleEv
el-switch点击不触发事件
06-22
当遇到El-Switch（Element UI中的开关组件）点击不触发事件的问题时，这可能是由于以下几个原因： 1. 组件状态或绑定的值没有更新：确保你的事件处理函数是在正确的组件生命周期阶段被绑定的，比如`v-model`绑定了一个响应式数据，如果数据未更新，事件可能不会被触发。检查数据绑定是否正常，以及数据是否有实时更新的逻辑。 2. 事件修饰符（.sync 或 .once）使用不当：`.sync`修饰符用于同步更新父组件的数据，而` .once`表示只触发一次。确保你使用了正确的修饰符，并且事件触发后组件状态确实已更新。 3. 组件被禁用（disabled）：El-Switch默认禁用时，点击是不会触发click事件的。检查开关组件是否处于禁用状态，如果是，需要先解除禁用。 4. 配合Element UI的其他指令：有时候，你可能在使用自定义指令或者其他第三方库，这可能导致事件冲突。确保没有其他指令阻止了默认行为。 5. JavaScript问题：检查是否有其他代码覆盖了事件处理器，或者事件监听器是否被意外移除。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值