Question

感谢您的帮助。基本上，我在计时器上有一个“停止”按钮-除了通过鼠标单击之外，还需要通过按键来激活它。例如，我尝试使用document.addeventlistener尝试了几种不同的方式，但是我所做的一切都没有奏效。以下是相关的HTML / JS。谁能指出我正确的方向？例如，理想情况下，我将在数字键盘上按一个数字以停止我的计数器。我不确定如何按照下面的块格式分隔两行代码，但是只知道按钮位于其正确的html标签中，而停止按钮位于脚本标签中。

谢谢

<button id="stop" class="btn btn-danger">STOP</button>


    /* Stop button */
stop.onclick = function() {
    clear = true;
    start.disabled = false;
    stop.disabled = true;
}

Answer 1

在这里，我为keydown事件创建了一个示例。使用Tab键导航到停止按钮，然后按Enter键将被禁用。

document.getElementById("stop").addEventListener("keypress", stopTimer, false); 
function stopTimer() {
    document.getElementById("stop").setAttribute('disabled', true);
}

<button id="stop">STOP</button>

Answer 2

对于按钮元素，单击事件已同时触发，单击和按下按键，如下所示（在您按下空格键或返回键时发生这种情况，而另一个按键只是触发了按下按键事件）；但无论如何，您都可以在元素上设置多个事件。

document.getElementById("stop").addEventListener("click",function(){
  console.log('Clicked!');
});

document.getElementById("stop").addEventListener("keypress",function(){
  console.log('Keypressed!');
});

<button id="stop">Stop!</button>

如果您需要无鼠标交互，则必须重点关注元素...

document.getElementById("stop").addEventListener("click",function(){
  console.log('Clicked!');
});

document.getElementById("stop").addEventListener("keypress",function(){
  console.log('Keypressed!');
});

document.getElementById("stop").focus();

<button id="stop">Stop!</button>

带键的触发按钮，而不是鼠标单击

2 个答案: