更新时间:2023-10-28 21:31:34
之所以会发生这种情况,是因为按下按钮上的Enter会触发其点击事件,并且当您按住某个键时,重复键会插入并不断对该键进行输入"结束.
It happens because pressing Enter on a button triggers its click event, and when you hold a key, key repeat kicks in and keeps "typing" that key over and over.
如果要在触发一次事件后的一段时间内忽略该事件,可以将代码添加到处理程序中以执行此操作:
If you want to ignore the event for a period of time after it's been triggered once, you can add code to your handler to do that:
var IGNORE_TIME = 1000; // One second
var lastClick = null;
document.querySelector('button').addEventListener('click', function (e) {
var now = Date.now();
if (!lastClick || now - lastClick > IGNORE_TIME) {
lastClick = now;
console.log(1);
}
});
<button>press Enter</button>
如果您从不不想按按钮上的Enter键来点击"它(我不建议这样做,对于依靠键盘使用的残障人士来说,这可能会很困难),您可以防止按钮上的 keydown
事件:
If you never want pressing Enter on the button to "click" it (which I don't recommend, you may make it difficult for someone with a disability who relies on using the keyboard), you can prevent the keydown
event on the button:
document.querySelector('button').addEventListener('click', function (e) {
console.log(1);
});
document.querySelector('button').addEventListener('keydown', function (e) {
var key = e.keyCode || e.charCode;
if (key == 13) {
e.stopPropagation();
e.preventDefault();
}
});
<button>press Enter</button>
另请参见 vlaz的答案,它仅在按键重复时才阻止按键,这似乎是一个很好的折衷方案.
See also vlaz's answer, which only prevents the keypress if it's from key repeat, which seems like an excellent compromise.