javascript - 当按键 "pressed"时,捕获 HTML 按钮上的 mousedown 事件

标签 javascript button dom-events

如果我在 Javascript 中为按钮设置了一个 mousedown 事件,那么当我按下该按钮时,该事件就会触发。如果我设置了一个点击事件,当我释放按钮时它会触发。这样我就可以随时了解按钮的状态。但是,如果使用键盘“按下”按钮(例如,使用选项卡选择按钮,然后按空格键按下按钮),我不会收到任何事件。但是,当我释放空格键时,我确实收到了单击事件。

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

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

最佳答案

不使用 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>

关于javascript - 当按键 "pressed"时,捕获 HTML 按钮上的 mousedown 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22026128/

相关文章:

javascript - React Native - TouchableOpacity 导致应用程序在 Android 上崩溃

javascript - 在函数内声明变量返回未定义

python - 如何将计算表单按钮命令传递到输入字段?

javascript - 是否可以使用 JavaScript 触发键盘按钮?

javascript - 缩放后确定鼠标在 HTML5 Canvas 上的位置

javascript - 按住空格键会导致鼠标光标消失

javascript - 将滚动页面上的 div 居中

javascript - 如何使用 javascript 创建多重链接和有向图?

ios - 制作一个不隐藏在 GameScene 中的按钮

Javascript 下载在 Firefox 中停止,但在 Chrome 中有效