Leertaste löst Klickereignis auf Checkbox aus?

Question

Wenn Sie die Leertaste auf ein Kontrollkästchen setzen, wird das Kontrollkästchen aktiviert. Alles war in Ordnung, bis ich entschied, das Click-Ereignis auf dem Eltern-Div zu deaktivieren, was, wie ich bemerkte, auch die Leertaste auf der Checkbox deaktivierte!

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/

Wie ich das verhindern kann? Es scheint mir ein sehr merkwürdiges Verhalten zu sein. Klicken Sie auf Ereignisse Ereignisse klicken, nicht Tastaturereignisse ...

Hinweis: getestet mit Chrom und FF

Edit: Schlimmste: outputing das Ereignis in der Konsole gibt einen ... Mouseevent!

Answer 1

Quirksmode - click, mousedown, mouseup, dblclick

das Click-Ereignis wird ausgelöst, wenn der Benutzer auf ein Element klickt oder aktiviert ein Element mit anderen Mitteln (dh die Tastatur) ... „klicken Sie auf“ Ereignis ist wirklich eine falsche Bezeichnung: Es sollte das "Aktivieren" -Ereignis genannt werden.

Um dies zu umgehen, können Sie eine clickundkeyup Ereignis an das Kontrollkästchen anhängen.

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

Hören Sie auf beide Ereignisse, und deaktivieren Sie das Standardverhalten immer. Von dort können Sie feststellen, ob die Leertaste ein keyup Ereignis ausgelöst hat, wenn die Taste 32 gedrückt wird (e.keyCode === 32).

Wenn ja, manuell auf das Kontrollkästchen überprüfen, ob es nicht geprüft, und es deaktivieren, wenn es geprüft ist.

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

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

Updated Example - getestet in den neuesten Versionen von 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" />

Answer 2

Kaiido scheint eine gute Lösung zu haben. Was das Verhalten betrifft, wird dies offensichtlich erwartet. Nach:

W3C - SCR35: Making actions keyboard accessible by using the onclick event of anchors and buttons

die onclick Veranstaltung wird von der Tastatur für die Zugänglichkeit Zwecke ausgelöst. Browser verwenden das Click-Ereignis, auch wenn seine von der Tastatur im Falle ausgelöst, dass eine Maus ist nicht vorhanden:

Während „Onclick“ klingt wie es an der Maus gebunden ist, das Ereignis Onclick tatsächlich auf den Standard abgebildet wird Aktion eines Links oder einer Schaltfläche. Die Standardaktion tritt auf, wenn der Benutzer auf das Element mit der Maus klickt, aber es tritt auch auf, wenn der Benutzer das Element fokussiert und den Eingabe- oder Speicherbereich eingibt und wenn das Element über die API für Eingabehilfen ausgelöst wird.