Wann ist ein Klick kein click? Für einen Webentwickler, der an einer komplexen Benutzeroberfläche arbeitet, ist das keine abstrakte philosophische Frage. Wenn Sie benutzerdefiniertes Mauseingabeverhalten implementieren, ist es wichtig, die Nutzerabsicht im Auge zu behalten. Wenn ein Nutzer beispielsweise mit der mittleren Maustaste auf einen Link klickt, ist es wahrscheinlich, dass er einen neuen Tab mit dem Inhalt dieses Links öffnen möchte. Wenn ein Nutzer mit der mittleren Maustaste auf ein beliebiges UI-Element klickt, sollten Sie davon ausgehen, dass dies versehentlich geschehen ist, und diese Eingabe ignorieren. Ein Klick auf eine primäre Schaltfläche sollte dagegen eine Reaktion der Benutzeroberfläche auslösen.
Es ist möglich, aber etwas umständlich, diese nuancierten Interaktionen über einen einzigen click-Ereignislistener zu modellieren. Sie müssten explizit das Attribut button der MouseEvent prüfen, um festzustellen, ob es auf 0 (primäre Schaltfläche) oder einen anderen Wert festgelegt ist. 1 steht in der Regel für die mittlere Schaltfläche usw. Aber nur wenige Entwickler prüfen die Eigenschaft button explizit. Das führt zu Code, in dem alle clicks identisch behandelt werden, unabhängig davon, welche Schaltfläche gedrückt wurde.
Ab Chrome 55 wird eine neue Art von MouseEvent namens auxclick ausgelöst, wenn auf eine nicht primäre Schaltfläche geklickt wird. Mit diesem neuen Ereignis geht eine entsprechende Änderung des Verhaltens des Ereignisses click einher: Es wird nur ausgelöst, wenn die primäre Maustaste gedrückt wird. Wir hoffen, dass diese Änderungen es Webentwicklern erleichtern, Event-Handler zu schreiben, die nur auf die gewünschten Klicktypen reagieren, ohne die Property MouseEvent.button speziell prüfen zu müssen.
Falsch positive Meldungen reduzieren
Wie bereits erwähnt, bestand einer der Gründe für die Erstellung von auxclick darin, die Bereitstellung benutzerdefinierter click-Handler zu vermeiden, die das Verhalten „Mit der mittleren Maustaste klicken, um einen Tab zu öffnen“ fälschlicherweise überschreiben. Angenommen, Sie haben einen click-Ereignishandler geschrieben, der die History API verwendet, um die Standortleiste neu zu schreiben und benutzerdefinierte Navigationen auf einer Seite zu implementieren. Das könnte in etwa so aussehen:
document.querySelector('#my-link').addEventListener('click', event => {
event.preventDefault();
// ...call history.pushState(), use client-side rendering, etc....
});
Ihre benutzerdefinierte Logik funktioniert möglicherweise wie vorgesehen, wenn sie durch die primäre Maustaste ausgelöst wird. Wenn der Code jedoch ausgeführt wird, wenn auf eine mittlere Taste geklickt wird, handelt es sich um einen False Positive. Vor dem neuen Verhalten haben Sie die Standardaktion zum Öffnen eines neuen Tabs verhindert, was den Erwartungen der Nutzer widerspricht.
Sie könnten zwar zu Beginn des Handlers explizit nach event.button === 0 suchen und den Code nur dann ausführen, wenn dies der Fall ist, aber es ist leicht, dies zu vergessen oder gar nicht zu bemerken, dass dies erforderlich ist.
Nur den benötigten Code ausführen
Die Kehrseite von weniger falsch positiven Ergebnissen ist, dass auxclick-Callbacks nur dann ausgeführt werden, wenn tatsächlich eine andere Maustaste als die primäre angeklickt wird. Wenn Sie Code haben, in dem beispielsweise eine geeignete Ziel-URL berechnet werden muss, bevor ein neuer Tab geöffnet wird, können Sie auf auxclick warten und diese Logik in Ihren Callback einbinden. Es wird nicht ausgeführt, wenn auf die primäre Maustaste geklickt wird.
Browserunterstützung und -kompatibilität
Dieses neue Verhalten ist derzeit nur in Chrome 55 implementiert. Wie im ursprünglichen Vorschlag erwähnt, freuen wir uns über positives und negatives Feedback von Webentwicklern. Am besten reichst du ein GitHub-Problem ein, um das Feedback an die Personen weiterzuleiten, die an der Standardisierung arbeiten.
In der Zwischenzeit müssen Entwickler nicht warten, bis auxclick allgemein verfügbar ist, um einige Best Practices für die Verarbeitung von Mausereignissen zu befolgen. Wenn Sie sich die Zeit nehmen, den Wert der MouseEvent.button-Property zu Beginn Ihres click-Ereignishandlers zu prüfen, können Sie entsprechende Maßnahmen ergreifen. Mit dem folgenden Muster werden primäre und sekundäre Klicks unterschiedlich behandelt, unabhängig davon, ob auxclick nativ unterstützt wird:
function handlePrimaryClick(event) {
// ...code to handle the primary button click...
}
function handleAuxClick(event) {
// ...code to handle the auxiliary button click….
}
document.querySelector('#my-link').addEventListener('click', event => {
if (event.button === 0) {
return handlePrimaryClick(event);
}
// This provides fallback behavior in browsers without auxclick.
return handleAuxClick(event);
});
// Explicitly listen for auxclick in browsers that support it.
document.querySelector('#my-link').addEventListener('auxclick', handleAuxClick);