如果在复选框上空格键,它会选中该框。一切都很好,直到我决定禁用父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 触发元素。