如何触发按钮点击按键？ [复制]答案

【问题标题】：How can I trigger button click on key press? [duplicate]如何触发按钮点击按键？ [复制]
【发布时间】：2020-09-14 08:13:18
【问题描述】：

假设我有以下 3 个按钮：

<div role="button" class="ico-btn">
  Button A
</div>
<div role="button" class="ico-btn">
  Button B
</div>
<div role="button" class="ico-btn">
  Button C
</div>

有什么方法可以通过按键盘上的A键来触发Button A，或者通过按键盘上的B键来触发Button B等等。 ?像属性 keypress="A" 之类的东西可以让事情更容易访问？

【问题讨论】：

类似这样的东西-stackoverflow.com/questions/979662/…
副本有你的答案。这是关于收听 Return 键的，但模式是相同的。挂钩事件处理程序并询问事件以确定按下了什么键。
@Vibs 并非一切都需要 jQuery。
@Olian04 他在哪里说的？ OP 已对其进行了标记，因此我认为他的建议并非不合理。
@RoryMcCrossan 我的错。我错过了用 jQuery 标记的问题。

标签： javascript html jquery

【解决方案1】：

这可以通过委托的事件侦听器相当容易地完成：

// listen for keys
document.addEventListener('keyup', function(event){

    // all divs with the attribute data-listening_key
    var elems = document.querySelectorAll('div[data-listening_key]');
    elems.forEach(function(element, index){

        // if the one it's listening for matches this event
        var listening_key = element.dataset.listening_key;
        if(listening_key === event.key){
            var clickEvent = new Event('click'); // create and dispatch a click to it!
            element.dispatchEvent(clickEvent);
        }
    });
});

<div data-listening_key='x' onclick="console.log('Button A clicked')">
    Button A
</div>
<div data-listening_key='y' onclick="console.log('Button B clicked')">
    Button B
</div>
<div data-listening_key='z' onclick="console.log('Button C clicked')">
    Button C
</div>

【讨论】：

【解决方案2】：

您可以addEventListener 记录和检查keyCode。 A 是 65

document.getElementById('btnA').addEventListener('click', triggerA)

// function which will trigger on click of A
// So dirctly clicking A this function will trigger. 
// This is just for validation
function triggerA() {
  console.log('A')
}

document.body.addEventListener('keyup', function(e) {
  if (e.keyCode === 65) {
    // on press of A the div#btnA is getting clicked
    document.getElementById('btnA').click();
  }
})

.ico-btn {
  border: 1px solid yellow;
  border-radius: 2px;
  margin: 5px;
}

<div role="button" class="ico-btn" id='btnA'>
  Button A
</div>
<div role="button" class="ico-btn">
  Button B
</div>
<div role="button" class="ico-btn">
  Button C
</div>

【讨论】：