函数在火狐浏览器的空格键上被调用两次

Question

我在单击按钮时调用一个函数，它工作正常。但是当我专注于按钮并从键盘按空格键时，该功能在 Firefox 浏览器上被调用两次，而它在 chrome 上正常工作。按回车键也可以正常工作。问题仅与空格键有关。

function myFunction(name, eventNode) {
console.log("here");
// callingAnotherFunction(name);             
}

<button type="button" class="btn-transparent dropdown-toggle" onClick="myFunction('test', this)"><i class="ico ico-cm-arrow"></i>Click me</button>

在控制台上按空格键打印"这里"两次

Answer 1

您可以使用以下解决方法将空间与单击分开。作为单击事件的空间在许多浏览器中都是错误的，因此您可以调用 onmousedown 或 onmouseup 事件，也可以调用 onkeyup 事件并检查它是否是空格键。

function myFunction(name, eventNode) {
console.log("here");
// callingAnotherFunction(name);             
}
function keypress(e) {
if (e.keyCode == "32") {
myFunction('test', this);
}
}

<button type="button" class="btn-transparent dropdown-toggle" onmouseup="myFunction('test', this)" onkeyup="keypress(event)"><i class="ico ico-cm-arrow"></i>Click me</button>