javascript - focus方法触发按钮点击事件

Question

我有一个带有 keydown 处理程序的 div 和带有单击处理程序的按钮，在那个 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>

Answer 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>