【vue】【element-ui】【错误记录】vue使用element-ui时，.native点击事件触发两次

最新推荐文章于 2024-07-12 17:13:27 发布
最新推荐文章于 2024-07-12 17:13:27 发布
阅读量1.4k 收藏 3
点赞数
分类专栏： vue 文章标签： vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34838046/article/details/108950944
版权
当在Vue中使用Element-UI的el-checkbox组件并绑定.native点击事件时，发现事件被触发两次。解决方法是在事件处理函数中通过$event.target检查元素类型，过滤掉重复触发。问题源于事件冒泡，详细原因待查。
摘要由CSDN通过智能技术生成

文章目录

现象

使用element-ui的组件el-checkbox，绑定点击事件

    <el-checkbox @click="state()"></el-checkbox>

点击事件不触发
添加.native标签之后，触发了事件，但是触发了两次

    <el-checkbox @click.native
最低0.47元/天 解锁文章
前端二狗子
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
elementui组件使用@click.native时，绑定的事件会触发2次的问题
KLW75
07-15 3981
事件冒泡机制导致，使用.prevent阻止默认事件，可以解决这个问题。 参考文章https://blog.csdn.net/SilenceJude/article/details/90240420
el-radio等elementui组件使用@click.native时，绑定的事件会触发2次的问题
SilenceJude的博客
05-15 8335
场景描述 由于某些原因，elementui提供的事件并不能满足我们的需求。此时如果想监听根元素的原生事件，就只能使用.native修饰符。 本次项目中，我也遇到了同样的情况，因此使用.native修饰符来监听原生click事件。 然而，在点击的时候，却发现el-radio上绑定的事件触发了2次！！ 解决过程 自己找了半天，也没找到问题所在。但是大概猜想到了原因，el-radio肯定是封装了好...
NaiveUI与ElementUI 比较分析
最新发布
jane_xing的博客
07-12 2489
在前端开发的广阔领域中，Vue.js作为最流行的前端框架之一，为开发者提供了丰富的组件库，其中NaiveUI和ElementUI是两个备受瞩目的选择。本文将深入分析这两个组件库的特点、优劣势以及适用场景，帮助开发者在项目中做出更合适的选择。
elementui设置点击点击事件，会触发两次
weixin_45403802的博客
11-22 707
事件是加在label上的，第一次触发是点击label，第二次点击了label标签，label标签与input标签关联 ->相当于点击input->input通过冒泡触发了方法。在使用饿了么组件radio时，@click.native，调用原生方法会触发两次效果。
vue中native的用法
weixin_44059755的博客
10-17 586
native是用于监听自定义标签的事件，如果给父组件中的子组件元素绑定一个事件，不使用native将不会触发对应的方法，如果进行绑定后将触发相应的方法。
vue @click 多次触发解决
JAVA5G的专栏
05-25 9759
场景： 提示：同事写了个普通的点击事件： 例如：@click="xxx"xxx是点击事件要执行的 结果每次点击就会触发两次 问题描述 提示：这里描述项目中遇到的问题： 。 解决方案： 提示：这里填写该问题的具体解决方案： 例如： @click="xxx($event)" xxx(e){ e.preventDefault(); } 当然 如果你是一次性的不需要多去触发去更新状态 可以用vue的 v-on:click.once="xxx" xxx就是对应的点击方法 ...
vue element-ui 绑定@keyup事件无效的解决方法
08-27
总的来说，当遇到Vue Element-UI绑定`@keyup`事件无效的情况时，可以通过添加`.native`修饰符来解决。这个方法可以让你的事件监听器直接绑定到原始的DOM元素上，从而绕过Element-UI组件内部的事件处理。不过，需要...
【JavaScript源代码】Vue+element-ui添加自定义右键菜单的方法示例.docx
12-30
### Vue + Element UI 添加自定义右键菜单的知识点解析 #### 一、概述 本文将详细介绍如何在基于Vue.js框架的项目中结合Element UI库，实现一个简单的自定义右键菜单功能。通过以下步骤，您将了解到从创建绑定事件...
解决element-ui中下拉菜单子选项click事件不触发的问题
10-18
在Vue和Element-UI结合使用时，通常需要我们熟悉Vue的事件绑定机制，同时也要了解Element-UI内部是如何处理这些事件的。 总之，通过使用.native修饰符，我们可以解决Element-UI中下拉菜单子选项click事件不触发的...
Vue及Element UI&vue-element-admin简记
生活在别处
11-21 6918
文章目录概念索引安装vue基本语法声明式渲染动态参数双向绑定数据绑定中进行数据处理使用JS表达式计算属性侦听器Class 与 Style 的数据绑定Class的数据绑定Style的数据绑定条件与循环条件渲染v-if指令v-show指令列表（数组）渲染数据更新检测事件监听器修饰符事件修饰符按键修饰符按键码系统修饰键指令的缩写组件化应用构建vue实例实例生命周期的钩子模板语法高级语法相关概念HTML ...
用c++怎么实现屏幕取词
weixin_42199918的博客
07-17 1038
网上搜了一大堆全都看不懂，现在越来越头晕了。请问大佬们有没有源码之类的，不胜感激，能给提示也可以。谢谢 居中的图片: 居中并且带尺寸的图片: 当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。 如何插入一段漂亮的代码片 去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片. // An highlighted block var foo = 'bar'; 生成一个适...
vue 使用elementUI的input组件，失去焦点和按下回车键重复调用同一方法造成二次执行的问题
成遗憾的博客
07-28 2835
input组件失去焦点和按下回车键重复调用同一方法造成二次执行的问题
native导致elementUI元素两次触发
qizi_的博客
10-23 1023
.native导致elementUi元素点击事件触发两次的一种解决方案 <el-radio-button @click.native="fn()"></el-radio-group> 其中fn方法触发会执行两次,原因是冒泡事件,使用prevent阻止冒泡会导致样式失效. 我使用的是另一种解决方案,在data中定义一个状态属性为true 方法中引用即可 if (this.noTwoReq) {//这里的代码是解决native会导致el元素点击事
elementUI_el-radio踩坑_设置点击事件会触发两次
qq_43260366的博客
08-15 4140
chooseIdClick方法无需执行两次，仅需要在input点击时触发即可；当运行时，点击按钮，发现chooseIdClick方法执行了两次；我发现elementUI的el-radio标签在封装过程中是这样的。使用了elementUI的单选按钮，点击按钮时对数据进行校验。方法是添加在label标签上的；所以用户点击之后的执行是这样的。......
vue 点击事件执行多次
a_靖的博客
09-26 1万+
把 @click 改成 @click.once 就可以了 示例代码 @click.once="down" 这样有一个弊端，就是事件只执行一次就不再执行了， 另一种方式，做一个定时器 //默认设置dddown为 true if(that.dddown){ that.dddown =false setTimeout(function(){ that.dddown =true }...
vue 点击一次却执行两次事件
weixin_44910772的博客
04-21 6274
click:true,修改成false 改完之后却发现图片点击之后触发了事件，但是没有跳到另一个页面，把prevent: true,改为false
vue.js怎样移除绑定的点击事件？
热门推荐
周清城的博客
08-15 2万+
使用v-on:click绑定的事件如何移除？？？ 现在我的处理方式是: "flag && clickEvent()">p> 加上一个标志位来控制点击事件是否能触发. 也可以这样解决： 采用v-if解决： 点击 点击 然后在data里添加unbind=false属性，需要解绑的时候将其设置为true
使用Vue+Element-ui构建登录注册验证表单
`@click`事件用于在按钮点击时触发登录操作。 7. **表单提交**：`submitForm`方法通常会负责处理表单的验证和提交逻辑。在验证通过后，可以发送请求到服务器进行登录验证。 8. **组件化编程**：Vue.js的组件化思想...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值