我有一个带有 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>
最佳答案
这种奇怪的行为只会在您按下 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>
关于javascript - focus方法触发按钮点击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50403457/