避免点击空格或回车会触发鼠标上次的点击事件

情况:

点击按钮后,再点击空格键或者回车键会触发上一次的点击事件,导致重复调用,造成数据量增加。

原因分析:

button按钮点击之后焦点没有移除,仍在按钮之上,即点击空格或回车之后会继续执行button的click事件

解决方案:

@keyup.prevent @keydown.enter.prevent

<button class="buttonStyle" @click="addHastenInfoZhangAi" @keyup.prevent @keydown.enter.prevent>测试</button>

注意:如果使用element-ui组件库中的<el-button></el-button>,可能@keyup.prevent @keydown.enter.prevent会不生效,框架内获取有什么设置阻止了,本次未作深究,所以这里我使用了原生的button按钮,自己写了css样式,可供参考。

CSS:

.buttonStyle{
    padding: 1px 10px;
    color: #fff;
    background-color: #409EFF;
    border-color: #409EFF;
    cursor: pointer;
    border-radius:4px;
    box-shadow: none;
    outline:none;//去除点击时出现的黑色边框
}
.buttonStyle:hover{
    color: #409EFF;
    background-color: #fff;
    border-color: #fff;
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值