空格键触发复选框上的点击事件？ [英] Spacebar triggering click event on checkbox?

问题描述

如果您在复选框上有空格键，它会检查框。一切都很好，直到我决定禁用父div上的click事件，我意识到，禁用了复选框上的空格键！

  div1.addEventListener（click，function（e）{if（e.preventDefault）e.preventDefault（）; e.cancelBubble = true; return false;}， true）;  

 < div id =div1> ; < input id =chk1type =checkbox>< / div>  

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

我该如何预防这种情况？这对我来说似乎是一个非常奇怪的行为。点击事件是点击事件，而不是键盘事件...

注意：使用chrome和FF测试

编辑：最差：在控制台输出事件给出一个... MouseEvent！

解决方案

Quirksmode - 点击，mousedown，mouseup，dblclick

当用户点击某个元素时触发click事件，或者通过其他方式激活元素（即键盘） ...click事件是真的是一个误导：它应该被称为激活事件。

要解决这个问题，你可以附加一个点击 和 keyup 事件到复选框。

  checkbox.addEventListener（click，handleCheckboxEvent，true）; 
 checkbox.addEventListener（keyup，handleCheckboxEvent，true）; 
  

收听两个事件，并始终禁用默认行为。从那里，如果按下键 32 （），您可以确定空格键是否触发了 keyup 如果是这样，手动选中复选框，如果它是不是 >检查，如果 选中，则取消选中。

 函数handleCheckboxEvent（e）{
 e.preventDefault（）; 
 
 if（e.keyCode === 32）{//如果空格键触发事件
 this.checked =！this.checked; 
} 
} 
  

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



< input id =checkboxtype =checkbox/> ;

If you spacebar on a checkbox, it checks the box. Everything was fine until I decide to disable the click event on the parent div, which I realized, disabled the spacebar on the checkbox as well!

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/

How can I prevent that? It seems like a very odd behaviour to me. Click events are click events, not keyboard events...

Note: tested with chrome and FF

Edit: worst: outputing the event in the console gives a ... MouseEvent!

解决方案

Quirksmode - click, mousedown, mouseup, dblclick

The click event fires when the user clicks on an element OR activates an element by other means (i.e. the keyboard) ... "click" event is really a misnomer: it should be called the "activate" event.

To work around this, you can attach a click and keyup event to the checkbox.

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

Listen to both events, and always disable the default behavior. From there, you can determine if the spacebar fired a keyup event if the key 32 is pressed (e.keyCode === 32).

If so, manually check the checkbox if it is not checked, and uncheck it if it is checked.

function handleCheckboxEvent(e) {
    e.preventDefault();

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

Updated Example - tested in the latest versions of 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" />

这篇关于空格键触发复选框上的点击事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！