焦点方法触发按钮点击事件

Question

我有一个带有keydown处理程序和带有click处理程序的按钮的div，在该keydown处理程序中，我使用focus()方法聚焦到一个按钮上，但它会触发btn click处理程序。请告诉我为什么会发生这种情况。

注：在div上按enter键。

function btnclick() {
  console.log('button click triggered');
}

function btnKeyDown() {
  console.log('key down triggered');
  document.getElementById('btn1').focus();
}

<div id='btn' onkeydown="btnKeyDown()" tabindex='0'>Click1</div>
<button id='btn1' onclick="btnclick()">Click Me!2</button>

- Madhan

---

只有在按下回车键时才会发生，而不是任何其他键。 - Barmar

我认为它发生的原因是当您按下回车键时，因为在聚焦按钮后，默认的keydown事件处理程序将在现在聚焦的按钮上运行，如果您传递事件并调用e.preventDefault()，它应该可以阻止这种情况发生。 - Amr Noman

是的，我正在按回车键。 - Madhan

Answer 1

这种奇怪的行为只会在按下“回车”键时发生。当焦点位于元素上时，按下回车键相当于单击该元素。因此，当你改变焦点时，默认操作会被执行在新聚焦的元素上，而不是原始的那个。

调用 event.preventDefault() 可以避免这种情况发生。

function btnclick() {
  console.log('button click triggered');
}

function btnKeyDown(event) {
  console.log('key down triggered');
  document.getElementById('btn1').focus();
  event.preventDefault();
}

<div id='btn' onkeydown="btnKeyDown(event)" tabindex='0'>Click1</div>
<button id='btn1' onclick="btnclick()">Click Me!2</button>

- Barmar

---

那不太对。它触发了两个“事件”。这是怎么发生的？我猜用jQuery的.one()会有所帮助。%）P - deEr.

我能够通过使用keyup事件而不是keydown事件来绕过这种行为（可能是因为“点击”事件已经触发了一次keyup事件）。 - undefined

Answer 2

因为当您点击按钮时，它是在被点击。按键是用于键盘的。虽然我们称您创建的内容为按钮，但它不是“onkeydown”所指的按钮。

Barmar也正确关于回车键。如果您正在使用该键，它也会触发onclick事件。

- CHINCHUDO

Answer 3

你需要使用onfocus而不是onkeydown，它适用于所有浏览器

function btnclick() {
  console.log('button click triggered');
}

function btnKeyDown() {
  console.log('key down triggered');
  document.getElementById('btn1').focus();
 alert('key down triggered' +  document.getElementById('btn1').innerText);
  
}

<input type="text" id="txtVal" onfocus="btnKeyDown()" >
<div id='btn' onfocus="btnKeyDown()" tabindex='0'>Click1</div>
<button id='btn1' onclick="btnclick()">Click Me!2</button>

- SantoshK