Question

从简单的javascript，如何判断当前是否按下<button>？

使用鼠标事件是不够的，因为可以按下按钮，例如按键，或者甚至是某些人未来发明的其他可访问性方法（平板电脑会浮现在脑海中））。

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

Answer 1

组合事件处理程序。在这里演示：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 2

我有点晚了，但我偶然发现了同样的问题，所以我来了。也许这仍然可以对其他人有所帮助。根据 HTML specification 按钮元素没有状态。当前是否按下按钮是 CSS 的问题。 CSS specification 定义了 :active 伪类在用户激活元素时应用。所以问题归结为如何使用 javascript 获取该类。这可以通过

完成

this == document.activeElement

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

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

Answer 3

在您的代码中添加“onclick”标签。

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

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

如何确定HTML Button的当前状态

3 个答案: