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

【问题标题】：Focus method triggers button click event焦点方法触发按钮点击事件
【发布时间】：2018-05-18 03:42:11
【问题描述】：

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

注意：在 div 上按回车键

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>

【问题讨论】：

只有当你按回车时才会发生这种情况，而不是任何键。
我认为当你按下回车键时会发生这种情况，因为在你聚焦按钮后，keydown 的默认事件处理程序将在现在聚焦的按钮上运行，如果你传递事件并调用 e.preventDefault() 它应该防止这种情况发生。
是的，我正在按下回车键

标签： javascript html

【解决方案1】：

这种奇怪的行为只有在您按下 Return 键时才会发生。在焦点位于元素上时按 Return 相当于单击它。因此，当您更改焦点时，默认操作是在新获得焦点的元素上执行的，而不是原来的。

调用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>

【讨论】：

那是——不——完全正确。它同时触发events。这是怎么回事？我想带有 jQuery 的 .one() 确实有帮助。 %)P

【解决方案2】：

因为当您单击按钮时，它正在单击它。向下键用于键盘。虽然我们称您制作的按钮为按钮，但它并不是“onkeydown”时所指的按钮。

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

【讨论】：

【解决方案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>

【讨论】：