Wann ist ein Klick kein click? Für Webentwickler, die an einer komplexen Benutzeroberfläche arbeiten, ist das keine abstrakte philosophische Frage. Wenn Sie ein benutzerdefiniertes Mauseingabeverhalten implementieren, müssen Sie unbedingt die Nutzerabsicht berücksichtigen. Wenn ein Nutzer beispielsweise mit der mittleren Maustaste auf einen Link klickt, ist die Annahme nahe, dass er einen neuen Tab mit dem Inhalt dieses Links öffnen möchte. Wenn ein Nutzer mit der Mitte auf ein zufälliges UI-Element klickt, ist es möglicherweise ein Irrtum, die Eingabe zu ignorieren, während ein Klick auf die primäre Schaltfläche eine Antwort von der Benutzeroberfläche auslöst.
Es ist möglich, diese nuancierten Interaktionen über einen einzelnen click-Event-Listener zu modellieren, wenn dies etwas umständlich ist. Sie müssen explizit das Attribut button von MouseEvent prüfen, um festzustellen, ob es auf 0 gesetzt ist, also die primäre Schaltfläche und alles andere, wobei 1 normalerweise für die mittlere Schaltfläche steht usw. Allerdings gehen nicht viele Entwickler so weit, dass sie das Attribut button explizit prüfen. Dies führt zu Code, der alle clicks unabhängig davon, welche Schaltfläche gedrückt wurde, gleich behandelt.
Ab Chrome 55 wird ein neuer MouseEvent-Typ namens auxclick als Reaktion auf alle Klicks ausgelöst, die mit einer nicht primären Schaltfläche ausgeführt werden. Ergänzend zu diesem neuen Ereignis folgt eine entsprechende Verhaltensänderung des click-Ereignisses: 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 Art von Klicks reagieren, die für sie wichtig sind, ohne das Attribut MouseEvent.button explizit prüfen zu müssen.
Falsch positive Meldungen reduzieren
Wie bereits erwähnt, bestand ein Grund für die Erstellung von auxclick darin, die Bereitstellung von benutzerdefinierten click-Handlern zu vermeiden, die fälschlicherweise das Verhalten „Mittlerer Klick öffnet einen Tab“ überschreiben. Angenommen, Sie haben einen click-Event-Handler geschrieben, der die History API verwendet, um die Adressleiste neu zu schreiben und benutzerdefinierte Navigationen auf einer einzelnen Seite zu implementieren. Er könnte 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 beabsichtigt, wenn sie durch die primäre Taste einer Maus ausgelöst wird. Wenn dieser Code jedoch ausgeführt wird, wenn auf eine mittlere Schaltfläche geklickt wird, ist dies ein falsch positives Ergebnis. Bisher wurde die Standardaktion zum Öffnen eines neuen Tabs verhindert, was den Erwartungen der Nutzer widerspricht.
Sie können zwar am Anfang des Handlers explizit auf event.button === 0 prüfen und den Code nur dann ausführen, wenn das der Fall ist. Das kann jedoch leicht vergessen werden oder ist nie für erforderlich.
Nur den Code ausführen, den Sie benötigen
Das Gegenteil von weniger falsch positiven Ergebnissen besteht darin, dass auxclick-Callbacks nur dann ausgeführt werden, wenn tatsächlich eine nicht primäre Maustaste angeklickt wird. Wenn Sie Code haben, der beispielsweise eine entsprechende Ziel-URL berechnen muss, bevor ein neuer Tab geöffnet wird, können Sie auf auxclick warten und diese Logik in Ihren Callback aufnehmen. Es verursacht keinen zusätzlichen Aufwand für die Ausführung, wenn auf die primäre Maustaste geklickt wird.
Browserunterstützung und Kompatibilität
Dieses neue Verhalten ist derzeit nur in Chrome 55 implementiert. Wie bereits im ersten Vorschlag erwähnt, freuen wir uns über positives und negatives Feedback aus der Webentwickler-Community. Ein GitHub-Problem zu melden, ist die beste Möglichkeit, dieses Feedback denjenigen mitzuteilen, die am Standardisierungsprozess 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 des Attributs MouseEvent.button am Anfang des Event-Handlers click zu prüfen, können Sie geeignete Maßnahmen ergreifen. Beim folgenden Muster werden primäre und Hilfsklicks unterschiedlich verarbeitet, unabhängig davon, ob eine native Unterstützung für auxclick vorhanden ist oder nicht:
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);