Quando un clic non è un click? Per uno sviluppatore web che lavora a un'interfaccia
utente complessa, non è una questione filosofica astratta. Se implementi un comportamento di input del mouse personalizzato, è fondamentale tenere a mente le intenzioni degli utenti. Se un utente fa clic su un link con il pulsante centrale del mouse, ad esempio, è ragionevole supporre che voglia aprire una nuova scheda con i contenuti di tale link. Se un utente fa clic con il pulsante centrale del mouse su un elemento dell'interfaccia utente casuale, puoi presumere che sia stato involontario e ignorare quell'input, mentre il clic sul pulsante principale dovrebbe attivare una risposta dall'interfaccia utente.
Se è un po' ingombrante, è possibile modellare queste interazioni più articolate tramite un singolo listener di eventi click. Devi controllare esplicitamente la proprietà button di MouseEvent per vedere se è impostata su 0, che rappresenta il pulsante principale, rispetto a qualsiasi altra cosa, dove 1 di solito rappresenta il pulsante centrale e così via. Tuttavia, non molti sviluppatori arrivano al controllo esplicito della proprietà button, generando un codice che gestisce tutti gli click in modo identico, indipendentemente dal pulsante premuto.
A partire da Chrome 55, viene attivato un nuovo tipo di MouseEvent, chiamato auxclick, in risposta ai clic effettuati con un pulsante non principale. A questo nuovo evento corrisponde un cambiamento di comportamento dell'evento click: si attiva solo quando viene premuto il pulsante principale del mouse. Ci auguriamo che queste modifiche agevolino gli sviluppatori web nella scrittura di gestori di eventi che rispondono solo al tipo di clic di loro interesse, senza dover controllare specificatamente la proprietà MouseEvent.button.
Riduci i falsi positivi
Come accennato, uno dei motivi per la creazione di auxclick è stato evitare il deployment di gestori click personalizzati che sostituiscono erroneamente il comportamento "middle-click-opens-a-tab". Ad esempio, immagina di aver scritto un gestore di eventi click che
utilizza l'API History
per riscrivere la barra dei percorsi e implementare navigazioni personalizzate a pagina singola. 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 tua logica personalizzata potrebbe funzionare come previsto quando viene attivata dal pulsante principale di un mouse, ma se il codice viene eseguito quando si fa clic sul pulsante centrale, è un falso positivo. Prima del nuovo comportamento, finiresti per impedire l'azione predefinita di aprire una nuova scheda, il che è in contrasto con le aspettative dell'utente.
Puoi controllare esplicitamente event.button === 0 all'inizio del gestore
ed eseguire il codice solo in questo caso, ma puoi facilmente dimenticarlo o
non renderti conto che è necessario farlo.
Esegui solo il codice necessario
L'altro lato del minor numero di falsi positivi è che i callback auxclick vengono eseguiti solo quando viene effettivamente fatto clic su un pulsante del mouse non principale. Se hai un codice che deve calcolare, ad esempio, un URL di destinazione appropriato prima di aprire una nuova scheda, puoi ascoltare auxclick e includere questa logica nel callback. Non comporta l'overhead di esecuzione quando si fa clic sul pulsante principale del mouse.
Supporto e compatibilità dei browser
Questo nuovo comportamento è attualmente implementato solo in Chrome 55. Come menzionato nella proposta iniziale, il feedback (positivo e negativo) della community di sviluppatori web è apprezzato. Presentare un problema di GitHub è il modo migliore per condividere questo feedback con le persone che lavorano al processo di standardizzazione.
Nel frattempo, gli sviluppatori non devono attendere che auxclick diventi ampiamente disponibile per seguire alcune best practice per la gestione degli eventi del mouse. Se ti impegni a controllare il valore della proprietà MouseEvent.button all'inizio del gestore di eventi click, puoi assicurarti di prendere le misure appropriate. Il seguente pattern gestirà i clic principali e ausiliari in modo diverso, indipendentemente dal fatto che sia presente o meno il 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);