elementui组件使用@click.native时，绑定的事件会触发2次的问题

最新推荐文章于 2024-05-07 14:55:52 发布
原创 最新推荐文章于 2024-05-07 14:55:52 发布 · 4.2k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

博客指出事件冒泡机制引发问题，可使用.prevent阻止默认事件来解决。还提到点击事件应写为 @click.native.prevent，并给出参考文章链接。
@click.native中 .native 的含义与使用
02-18 7615
vue 当中的 @click.native .native--侦听组件根元素上的原生事件 作用： 给组件绑定原生事件 @click是我们在vue开发中经常用到的事件绑定，而@实际上是 v-on 的简写，而 v-on 则是对 vue 的事件体系封装之后的 API接口 也就是说，在处理DOM原生事件的场合中需要添加额外的标识符 比如：如果使用router-link标签，加上@click事件，绑定的事件会无效，因为router-link的作用是单纯的路由跳转，会阻止click事件，如果不加.nativ.
el-radio等elementui组件使用@click.native时，绑定的事件会触发2次的问题
SilenceJude的博客
05-15 8654
场景描述 由于某些原因，elementui提供的事件并不能满足我们的需求。此时如果想监听根元素的原生事件，就只能使用.native修饰符。 本次项目中，我也遇到了同样的情况，因此使用.native修饰符来监听原生click事件。 然而，在点击的时候，却发现el-radio上绑定的事件触发了2次！！ 解决过程 自己找了半天，也没找到问题所在。但是大概猜想到了原因，el-radio肯定是封装了好...
elementUI_el-radio踩坑_设置点击事件会触发两次
qq_43260366的博客
08-15 4573
chooseIdClick方法无需执行两次，仅需要在input点击时触发即可；当运行时，点击按钮，发现chooseIdClick方法执行了两次；我发现elementUI的el-radio标签在封装过程中是这样的。使用了elementUI的单选按钮，点击按钮时对数据进行校验。方法是添加在label标签上的；所以用户点击之后的执行是这样的。......
element-ui tree组件解决点击node数据重复加载问题
qq_39210972的博客
02-23 3885
解决element-ui tree数据重复加载问题
elementui设置点击点击事件，会触发两次
weixin_45403802的博客
11-22 1038
事件是加在label上的，第一次触发是点击label，第二次点击了label标签，label标签与input标签关联 ->相当于点击input->input通过冒泡触发了方法。在使用饿了么组件radio时，@click.native，调用原生方法会触发两次效果。
【vue】【element-ui】【错误记录】vue使用element-ui时，.native点击事件触发两次
qq_34838046的博客
10-07 1513
文章目录现象解决方法原因 现象 使用element-ui的组件el-checkbox，绑定点击事件 <el-checkbox @click="state()"></el-checkbox> 点击事件不触发 添加.native标签之后，触发了事件，但是触发了两次 <el-checkbox @click.native="state()"></el-checkbox> 解决方法 通过事件对象元素的类型，过滤事件 修改为 <el-ch
一个因@click.stop引发的bug的解决
10-17
在`mounted`钩子中，Popover根据`trigger`属性绑定相应的事件处理函数，如对于`click`触发方式，它会在文档上绑定`handleDocumentClick`函数，用于监听全局的点击事件，可能正是这个函数负责检查是否需要隐藏Popover...
如果这是 Element UI 自己封装的行为，不是原生 HTML <form> 或 <label> 的默认特性，那为什么使用@click.native.prevent可以阻止这种行为，@click.native.prevent应该不能阻止自定义事件吧
02-27
现在用户的问题是，为什么使用@click.native.prevent可以阻止这个行为，因为用户认为.prevent只能阻止原生事件，而自定义事件可能需要其他方法。 首先，我需要确认Element UI的实现机制。根据之前的对话，Element ...
浅谈vue中组件绑定事件时是否加.native
10-16
本文将深入探讨Vue组件绑定事件时是否需要添加`.native`修饰符及其背后的原理。 1. 普通组件绑定事件 在Vue中，当我们为一个普通的HTML元素（如`<input>`、`<button>`等）绑定事件时，可以直接使用`@event`语法，...
@click.native
最新发布
05-29
引用1提到在div上使用@click.native来监听点击事件，但这里可能有问题，因为div本身是原生元素，不需要.native，除非这个div是组件的一部分。可能用户提供的例子有误，或者是在特定组件库中的情况。引用3和4指出，在...
点击label时click事件 触发两次的事件解决方案
ck07
03-28 1757
通过事件触发的时间戳来判断，其实和事件冒泡有关的问题都可以通过该方法去处理 var evTimeStamp = 0; document.getElementById("test").onclick = function(e) { var now = +new Date(); if (now - evTimeStamp < 100) {
使用react框架，ant design中双击事件触发单击事件解决办法
zjq_1234的博客
10-27 5868
场景： 在进行tag标签的编辑时，需求单击tag表示选中，双击tag进入编辑模式，进行修改。这样如果不做处理，双击会同时触发单击事件，解决思路：设置一个变量，在单击事件中进行延时设置，在双击事件中，直接将单击事件的延时取消，那么就不会触发单击事件。 详细实现思路： 1. 设置varclickTimeChange; 用于单击事件的延时变量。 2. 单击事件的代码如下： handleCheckChange = (tag, index) => { clearTimeo...
native导致elementUI元素两次触发
qizi_的博客
10-23 1135
.native导致elementUi元素点击事件触发两次的一种解决方案 <el-radio-button @click.native="fn()"></el-radio-group> 其中fn方法触发会执行两次,原因是冒泡事件,使用prevent阻止冒泡会导致样式失效. 我使用的是另一种解决方案,在data中定义一个状态属性为true 方法中引用即可 if (this.noTwoReq) {//这里的代码是解决native会导致el元素点击事
element树懒加载如何让其触发两次
weixin_45121510的博客
07-20 1411
<el-tree ref="tree" :data="treeData" :props="propsOption" :load="loadNode" :node-key="nodeKey" lazy :expand-on-click-node="false" :default-expanded-keys="defaultExpandedKeys" ></el-tree> 然后： data() { ...
vue 防止重复执行点击事件
weixin_48927323的博客
05-24 4741
在vue项目中防止用户在一定时间内频繁点击按钮触发事件 方法一: 在规定时间内将按钮禁用的方法： 主要思想就是禁止用户在一定的时间多次点击，在一定时间内将按钮禁用，用定时器实现，一定时间之后用户可再次点击。 <template> <div> <div @click="clickHandle()">我是点击事件</div> </div> </template> <script> expor.
vue @click 多次触发解决
热门推荐
JAVA5G的专栏
05-25 1万+
场景： 提示：同事写了个普通的点击事件： 例如：@click="xxx"xxx是点击事件要执行的 结果每次点击就会触发两次 问题描述 提示：这里描述项目中遇到的问题： 。 解决方案： 提示：这里填写该问题的具体解决方案： 例如： @click="xxx($event)" xxx(e){ e.preventDefault(); } 当然 如果你是一次性的不需要多去触发去更新状态 可以用vue的 v-on:click.once="xxx" xxx就是对应的点击方法 ...
【click事件重复触发】解决方案
南乡人的博客
05-07 966
如果 click 事件被多次触发，大概是因为事件监听器被重复绑定到同一个元素上。要解决这个问题，需要确保 click 事件监听器只被添加一次，或者在每次重新添加前先移除之前的监听器。（如果单纯是因为人为的手抖，频繁操作，可以用【节流】和【防抖】来避免）
el-radio控件click事件触发两次的解决办法
程序媛的博客
12-28 1750
elementui中，el-radio控件包含了label和input标签，在el-radio上设置了点击事件，让两个标签都拥有了该事件，所有click方法被调用了2次。方法2. 因为都触发了input标签和label标签的点击事件，可以通过对应事件的标签作加判断阻止其中一个就可以了。// 当是input标签触发的点击事件时，阻止该事件。方法1. 增加prevent修饰符阻止事件传递。alert('点击')alert('点击')发现点击事件被触发了两次。
解决当菜单下拉框点击事件click无效，点击两次才能跳转路由地址的问题（native时间修饰符）
weixin_45096939的博客
01-10 741
native修饰符只能用在组件上, 不能用在原生标签上（Element-ui组价库都是自定义组件）；native---监听组件根元素的原生事件，主要是给自定义的组件添加原生事件；解决办法：在点击事件click后面加.native就可以解决了。在 vue3 中 v-on 的.native修饰符已经被弃用了；@是v-on的简写；
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值