按键“按下”按钮时,在HTML按钮上捕获mousedown事件

时间:2014-02-25 21:03:58

标签: javascript button javascript-events

如果我在javascript中为按钮设置了一个mousedown事件,当我按下按钮时会触发它。如果我设置了一个click事件,它会在我释放按钮时触发。所以我可以随时通知按钮的状态。但是,如果使用键盘“按下”按钮(例如,使用选项卡选择按钮,然后按空格键按下按钮),我不会收到任何事件。但是,当我释放空格键时,我会收到点击事件。

似乎我可以将按键事件附加到按钮上,然后通过查看按下的按键并确保它是空格键我可以模拟mousedown,也就是说,我可以告诉按钮被按下了。但这假设空格键是被按下的键;在另一个浏览器或操作系统上可能不是这种情况。我想我可以简单地检查按钮是向上还是向下,但是我必须保持一些与鼠标事件共享的状态,否则鼠标可能已经按下按钮并且在鼠标停止时按下了无关键。

我没有找到任何具体的说明如何处理这种情况。我尝试过改变事件,但它永远不会发生。理想情况下,我希望只要按钮的状态发生变化,就会触发一个事件,无论它如何变化。或者,有两个单独的事件,一个是状态变为按下时,另一个是当状态变为未按下时,也可以接受,因为我可以将它们组合起来模仿前者。

2 个答案:

答案 0 :(得分:0)

不使用jquery的示例:

<html><body>
<button id="mybutton">Click or press</button>
<div id="status"></div>
<script type='text/javascript'>
function buttonDown(button) {
  document.getElementById("status").innerHTML = "button " + button.id + " pressed";
}
function buttonUp(button) {
  document.getElementById("status").innerHTML = "button " + button.id + " released";
}
var b = document.getElementById("mybutton");
b.addEventListener("keydown", function (e) {
  e = e || window.event;
  var code = e.keyCode || e.charCode;
  if (code == 32 || code == 13) { // enter or space
    buttonDown(this);
  }
});
b.addEventListener("keyup", function (e) {
  e = e || window.event;
  var code = e.keyCode || e.charCode;
  if (code == 32 || code == 13) { // enter or space
    buttonUp(this);
  }
});
b.addEventListener("mousedown", function (e) {
  e = e || window.event;
  var button = e.which || e.button;
  if (e.button == 0) { // left click
    buttonDown(this);
  }
});
b.addEventListener("mouseup", function (e) {
  e = e || window.event;
  var button = e.which || e.button;
  if (e.button == 0) { // left click
    buttonUp(this);
  }
});
</script>
</body></html>

答案 1 :(得分:-1)

更新

有关演示,请参阅此JSFiddle

示例:

$('input').on('keydown mousedown', function(e){
    var code = e.keyCode ? e.keyCode : e.charCode;
    alert('rawr!');
    if(code == 13)
    {
        alert('Enter key pressed!');
    }
});