javascript - 在 Firefox 中按下空格键时函数被调用两次

Question

我在单击按钮时调用了一个函数，并且它工作正常。但是，当我将注意力集中在按钮上并按键盘上的空格键时，该函数在 Firefox 浏览器上被调用两次，而它在 chrome 上正常工作。按 Enter 键也可以正常工作。问题仅在于空格键。

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>