Quando un clic non è un click? Per uno sviluppatore web che lavora a un'interfaccia utente complessa, non si tratta di una domanda filosofica astratta. Se stai implementando un comportamento di input del mouse personalizzato, è fondamentale tenere presente l'intenzione dell'utente. Ad esempio, se un utente fa clic su un link con il tasto centrale del mouse, è ragionevole presumere che volesse aprire una nuova scheda con i contenuti del link. Se un utente fa clic con il tasto centrale del mouse su un elemento dell'interfaccia utente casuale, potresti assumere che si tratti di un errore e ignorare l'input, mentre un clic sul pulsante principale dovrebbe attivare una risposta dall'interfaccia utente.
È possibile, anche se un po' complicato, modellare queste interazioni complesse tramite un singolo click listener di eventi. Dovresti controllare esplicitamente la proprietà
button
del pulsante
MouseEvent,
per vedere se è impostata su 0, che rappresenta il pulsante principale,
rispetto a qualsiasi altro, con 1 che in genere rappresenta il pulsante mediano e così via. Tuttavia, non molti sviluppatori arrivano a controllare esplicitamente la proprietà button, il che porta a un codice che gestisce tutti i valori click in modo identico, indipendentemente dal pulsante premuto.
A partire da Chrome 55, viene attivato un nuovo tipo di MouseEvent, chiamato auxclick, in risposta a qualsiasi clic effettuato con un pulsante non principale. Accanto a questo nuovo
evento è presente una modifica corrispondente del comportamento dell'evento click: verrà attivato solo
quando viene premuto il pulsante principale del mouse. Ci auguriamo che queste modifiche aiutino gli sviluppatori web a scrivere più facilmente gestori di eventi che rispondano solo al tipo di clic che li interessano, senza dover controllare specificamente la proprietà MouseEvent.button.
Riduci i falsi positivi
Come accennato, uno dei motivi per cui è stato creato auxclick è stato evitare il deployment di gestori auxclick personalizzati che sostituiscono erroneamente il comportamento "clic con il tasto centrale apre una scheda".click Ad esempio, immagina di aver scritto un gestore eventi click che utilizza l'API History per riscrivere la barra di ricerca e implementare navigazioni a pagina singola personalizzate. Potrebbe avere un aspetto simile al seguente:
document.querySelector('#my-link').addEventListener('click', event => {
event.preventDefault();
// ...call history.pushState(), use client-side rendering, etc....
});
La logica personalizzata potrebbe funzionare come previsto quando viene attivata dal pulsante principale del mouse, ma se il codice viene eseguito quando si fa clic su un pulsante centrale, si tratta di un falso positivo. Prima del nuovo comportamento, impedivi l'azione predefinita di apertura di una nuova scheda, il che andava contro le aspettative dell'utente.
Sebbene sia possibile verificare esplicitamente la presenza di event.button === 0 all'inizio dell'handler ed eseguire il codice solo in questo caso, è facile dimenticarlo o non rendersi mai conto che è necessario farlo.
Esegui solo il codice necessario
Il rovescio della medaglia di un numero inferiore di falsi positivi è che i callback auxclick verranno eseguiti solo quando viene effettivamente fatto clic su un pulsante del mouse non principale. Se hai del codice che deve, ad esempio, calcolare un URL di destinazione appropriato prima di aprire una nuova scheda, puoi ascoltare auxclick e includere questa logica nel callback. Non verrà applicato il sovraccarico di esecuzione quando viene fatto clic sul pulsante principale del mouse.
Supporto e compatibilità dei browser
Al momento questo nuovo comportamento è implementato solo in Chrome 55. Come indicato nella proposta iniziale, il feedback (positivo e negativo) della community di sviluppatori web è apprezzato. La segnalazione di un problema GitHub è il modo migliore per condividere il feedback con le persone che lavorano alla procedura di standardizzazione.
Nel frattempo, gli sviluppatori non devono attendere che auxclick sia ampiamente disponibile per seguire alcune best practice per la gestione degli eventi del mouse. Se ti prendi il tempo di controllare il valore della proprietà MouseEvent.button all'inizio del gestore eventi click, puoi assicurarti di intraprendere l'azione appropriata. Il
seguente pattern gestirà i clic principali e ausiliari in modo diverso, indipendentemente
dall'esistenza o meno del supporto nativo per auxclick:
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);