键盘回车和⿏标点击触发button按钮click事件的问题
⼀、问题描述
button按钮在获得焦点(foucs)的情况下，敲击键盘enter键也会触发button按钮的click事件，⼀般情况下不会有什么影响。但如果⽤户⿏标点击按钮后，在表单提交或者某些请求过程中，⽤户不停点击回车键，就会重复发起提交或者请求，如果未处理，很容易就出现错误。若涉及交易请求⼀类，这个问题会更加严重。（别问为什么会知道，问就是不知道）
以下⾯的代码为例：
<!-- 省略 -->
<body>
<button id="btn">按钮</button>
</body>
<!-- 省略 -->
<script type="text/javascript">
console.log('click')
console.log(e)
}
</script>
当点击⼀次按钮后，在敲击键盘回车，控制台照样会输出‘click’
上图中第⼆条输出就是键盘敲击回车enter后的结果，可以看到触发了click，默认为⿏标事件，但没有⿏标光标坐标信息
⼆、解决⽅案
这⾥提供能够想到的四种解决⽅案：
1. 去掉button的焦点
具体⽅法是，在click事件中主动去掉焦点，回车就不会触发click。
console.log('click')
console.log(e)
e.target.blur()
}
2.全局禁⽤enter事件
具体⽅法是监听键盘事件，如果keyCode为13，则直接返回。PS：键盘事件触发顺序keydown -> keypress -> keyup
console.log('click')
console.log(e)
}
var ev = (typeof event!= 'undefined') ? window.event : e
if(ev.keyCode == 13) {
return false
}
}
3.阻⽌键盘的默认⾏为
键盘按下回车后会转换成click
console.log('click')
console.log(e)
}
console.log('keypress')
}
所以只要监听键盘事件，阻⽌键盘的所有默认⾏为即可
console.log('click')
console.log(e)
blur事件
}
e.preventDefault()
}
4.设置全局锁
具体⽅法设置⼀个全局变量，如果执⾏就改变状态，下次不再执⾏
var flag = true
if (flag) {
console.log('click')
console.log(e)
}
flag = false
}
三、总结
在实际应⽤中，个⼈觉得第⼆种和第三种⽅式⽐较可取，当事件绑定⽐较多的时候，第⼀种和第四种⽅式明显⼯作量更⼤，冗余代码更多。
如果在vue项⽬中，可以配合使⽤修饰符解决这个问题，其本质上就是上⾯说的第⼆和第三个⽅法的结合。⽐如在button中绑定
@prevent或者prevent、@keypress.prevent或者v-on:keypress.prevent

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。