空格键触发单击事件复选框

Spacebar triggering click event on checkbox?

本文关键字：事件 复选框 单击 空格键      更新时间：2023-09-26

如果在复选框上空格键，它会选中该框。一切都很好，直到我决定禁用父div 上的单击事件，我意识到这也禁用了复选框上的空格键！

div1.addEventListener("click",function (e) {
  if (e.preventDefault) e.preventDefault();
  e.cancelBubble = true;
  return false;
}, true);
<div id="div1">
    <input id="chk1" type="checkbox">
</div>

http://jsfiddle.net/0t01252x/1/

我怎样才能防止这种情况发生？对我来说，这似乎是一种非常奇怪的行为。点击事件是点击事件，而不是键盘事件...

注意：使用铬和FF测试

编辑：最差：在控制台中输出事件会给出...鼠标事件！

怪癖模式 - 单击、鼠标向下、鼠标向上、dblclick

当用户单击元素或通过其他方式（即键盘）激活元素时，单击事件将触发..."点击"事件确实用词不当：它应该被称为"激活"事件。

若要解决此问题，可以将click和keyup事件附加到复选框。

checkbox.addEventListener("click", handleCheckboxEvent, true);
checkbox.addEventListener("keyup", handleCheckboxEvent, true);

侦听这两个事件，并始终禁用默认行为。从那里，您可以确定如果按下键32，空格键是否触发了keyup事件 （ e.keyCode === 32 ）。

如果是这样，如果未选中，请手动选中该复选框，如果选中

，请取消选中它。

function handleCheckboxEvent(e) {
    e.preventDefault();
    if (e.keyCode === 32) {  // If spacebar fired the event
        this.checked = !this.checked;
    }
}

更新的示例 - 在最新版本的Chrome/FF/IE中测试。

(function () {
    var checkbox = document.getElementById('checkbox');
    function handleCheckboxEvent(e) {
        e.preventDefault();
        if (e.keyCode === 32) {  // If spacebar fired the event
            this.checked = !this.checked;
        }
    }
    checkbox.addEventListener("click", handleCheckboxEvent, true);
    checkbox.addEventListener("keyup", handleCheckboxEvent, true);
})();
<input id="checkbox" type="checkbox" />

Kaiido 似乎有一个很好的解决方案。至于行为，这显然是意料之中的。根据：

W3C - SCR35：通过使用定位点和按钮的 onclick 事件使操作键盘可访问

出于辅助功能目的，onclick事件由键盘触发。浏览器使用 click 事件，即使该事件在鼠标不存在的情况下从键盘触发：

虽然"onclick"听起来像是与鼠标绑定的，但onclick事件 实际上映射到链接或按钮的默认操作。这 当用户用鼠标单击元素时发生默认操作， 但当用户聚焦元素并点击 Enter 或 空间，以及何时通过辅助功能 API 触发元素。

相关文章：