Question

我有一个带有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>

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

因为当您单击按钮时，它会单击它。按键是键盘。虽然我们称你所做的是一个按钮，但当它显示“onkeydown”时，它不是指的按钮。

Barmar对输入键也是正确的。如果这是您正在使用的密钥，它也会触发onclick事件。

Answer 3

而不是onkeydown您需要使用适用于每个浏览器的onfocus

＆＃13;

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);
  
}

＆＃13;

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

＆＃13;

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

3 个答案: