如何确定HTML按钮的当前状态

Question

从普通的javascript中，如何判断当前是否按下了<button>？

仅使用鼠标事件是不够的，因为可以通过另一种输入方法按下按钮，例如按下键，甚至可能是某些人将来发明的其他可访问性方法(可以想到平板电脑)。

但是在搜索button元素的属性和属性时，我没有看到任何显示按钮当前状态的信息。

Answer 1

我有点晚了，但是我在同一个问题上绊倒了，所以我来了也许这对其他人还是有帮助的。根据HTML规范，按钮元素没有状态。如果按钮当前是否按下是CSS的问题。CSS规范定义:active伪类在用户激活元素时应用。因此，问题归结为如何使用javascript获取该类。这件事可以用

this == document.activeElement

这是按钮的位置。如果按钮处于活动状态，则语句为true。

实际上，按钮，而不是复选框，不保持状态是有意义的。

Answer 2

合并事件处理程序。这里的演示：http://jsbin.com/horeq/2/edit

HTML

<button id="a">Button</button>


<pre id="output"></pre>

jQuery

var output = $('#output'),
    btn    = $('button#a');

var active;

btn.on('mousedown keydown', function(data) {
  active = 'on';
  output.html(active);
})
btn.on('mouseup keyup', function(data) {
  active = 'off';
  output.html(active);
})

JS (可能更有效率)

var output = document.getElementById('output'),
    btn    = document.getElementById('a');


var active;

btn.addEventListener('keydown', function(data) {
  active = 'on';
  output.innerHTML = active;
});

btn.addEventListener('keyup', function(data) {
  active = 'off';
  output.innerHTML = active;
});

btn.addEventListener('mousedown', function(data) {
  active = 'on';
  output.innerHTML = active;
});

btn.addEventListener('mouseup', function(data) {
  active = 'off';
  output.innerHTML = active;
});

Answer 3

在代码中添加"onclick"-tag。

<input type="button" name="button" value="button" onclick="myfunction()">

现在设备运行javascript-函数，如果按钮被点击！