思路：

包一层 UI 库的 button，在里面监听 onkeydown 和 onkeyup，用 flag 阻止长按回车一直触发。
然后在项目全局重新注册 el-button 覆盖掉UI内的按钮组件。

优点

即开即用，将组件添加到项目内，引入注册即可。
也不会阻止第一次回车触发的点击事件，保留原有逻辑。
不需要改项目中的原button代码。

使用（Element-UI）

// main.jsimport DDButton from '@/components/button.vue';// 覆盖 element button 解决点击按钮后，长按回车无限触发点击事件问题
Vue.component('el-button', DDButton);

组件封装

<template><el-btnref="btn":type="type":size="size":icon="icon":nativeType="nativeType":loading="loading":disabled="disabled":plain="plain":autofocus="autofocus":round="round":circle="circle"@click="handleClick"><slot></slot></el-btn>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import { Button } from 'element-ui';
@Component({components: {elBtn: Button,},
})
export default class DDButton extends Vue {@Prop({ default: 'default', type: String }) type?: string;@Prop({ default: '', type: String }) size?: string;@Prop({ default: '', type: String }) icon?: string;@Prop({ default: 'button', type: String }) nativeType?: string;@Prop({ type: Boolean }) loading?: boolean;@Prop({ type: Boolean }) disabled?: boolean;@Prop({ type: Boolean }) plain?: boolean;@Prop({ type: Boolean }) autofocus?: boolean;@Prop({ type: Boolean }) round?: boolean;@Prop({ type: Boolean }) circle?: boolean;handleClick(evt: any) {this.$emit('click', evt);}handleKeydown() {let flag = false;const btn = this.$refs.btn as any;if (!btn?.$el) return;btn.$el.onkeydown = (e: any) => {if (e?.keyCode === 13) {if (!flag) {flag = true;} else {return false;}}};btn.$el.onkeyup = (e: any) => {if (e?.keyCode === 13) {flag = false;}};}mounted() {this.handleKeydown();}
}
</script>

码字不易，觉得有帮助的小伙伴记得点个赞鼓励下~

扫描上方二维码关注我的订阅号~

解决按钮点击后长按回车无限触发点击事件问题相关推荐

ajax点击事件无法触发,解决jQuery Ajax动态新增节点无法触发点击事件的问题_婳祎_前端开发者...
在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写οnclick="" ...
如何解决微信小程序用户高频率触发点击事件？
<view bindtap='debounce' bindtouchstart="touchStart" bindtouchend="touchEnd"& ...
微信小程序长按事件触发点击事件的BUG处理
微信小程序开发说实话还是有点糟心的,经过事件冒泡的坑之后,又遇到了长按事件(longtap)必触发点击事件(tap)的BUG 实例代码 wxml <view class="contai ...
vue点击弹窗自动触发点击事件的解决办法
业务场景:使用vue +element ui 的el-dialog,点击弹窗之后,默认加载第一个按钮的数据进行初始化. div 指令: // 自动触发点击事件directives:{trigger:{ ...
Mint-ui中loadmore(上拉加载下拉刷新)组件在ios中滑动会触发点击事件的解决方法...
bug说明: Mint-ui中loadmore(上拉加载下拉刷新)组件在使用fastclick的情况下 ,在ios设备中滑动会触发点击事件: 解决方法: 我是按需引入,去项目中找到loadmore ...
android按钮双击事件触发事件吗,Button.PerformClick（）不会触发点击事件，如果该按钮不可见在android...
我希望我的btnAppShare按钮被点击,即使按钮是不可见的,我已经wriiten此代码后按钮1点击侦听器是可见的基本上,我希望完全执行button1的setOnClickListener事件后,我 ...
解决datetimepicker不能触发点击事件，日期插件位置偏移，日期范围限制的问题
最初的问题: 一开始所遇到的问题是相对简单的,就是今天的日期是3-20,但是却可以选择20号之后的日期. html代码: <form action="web?module=stwmgr ...
android vue.js点击反应慢,解决vue 界面在苹果手机上滑动点击事件等卡顿问题
用vue编写项目接近尾声,需要集成到移动端中,在webstorm上界面,运行效果都很完美,但是在苹果手机上各种问题都出现了,原生项目一向滑动流畅,事件响应迅速,可是苹果手机打开这个项目有两个问题, ( ...
vue移动端点击事件延迟_解决Vue 界面在苹果手机上滑动点击事件等卡顿问题_莺语_前端开发者...
用 (1).滑动页面卡顿, (2).点击事件响应缓慢,百度才发现在苹果手机上有300ms的延迟. 一.滑动页面卡顿 //页面布局页面内容在对应的组件的最外层div上加上这样的样式: .conten ...

解决按钮点击后长按回车无限触发点击事件问题

思路：

优点

使用（Element-UI）

组件封装

码字不易，觉得有帮助的小伙伴记得点个赞鼓励下~

扫描上方二维码关注我的订阅号~

解决按钮点击后长按回车无限触发点击事件问题相关推荐

最新文章

热门文章