Prevenire "dirottare" l'intenzione di un collegamento fare clic quando si applica la funzionalità personalizzata a un evento click

Question

Ad esempio, c'è qualche codice JavaScript che ha un gestore di clic che determina dove l'utente deve essere reindirizzato. Diciamo che è solo un collegamento casuale di reindirizzamento che viene calcolato quando l'utente fa clic sul collegamento.

Ecco alcuni scenari:

• Se l'utente ha lasciato fa clic sul link, l'intenzione degli utenti è quello di mantenere la navigazione nella stessa scheda, che funziona bene con window.location.

• Se l'utente medio fa clic su questo collegamento, all'utente sembra che il sito Web abbia violato il clic centrale e semplicemente lo abbia ignorato, reindirizzando l'utente all'interno della stessa scheda anziché di una nuova scheda.

• Inoltre, come qualcuno ha appena commentato (e cancellato il commento?), Un altro scenario è che i tasti modificatori possono anche suggerire al browser di aprire una nuova scheda o anche una nuova finestra.

• Un altro suggerimento è la possibilità di aprire un collegamento in una nuova scheda o finestra tramite il menu di scelta rapida. Questo è meno importante, ma sicuramente lo stesso problema di usabilità.

Ho visto questo problema su molti siti web, in particolare per me, Google Analytics, dove quasi ogni volta che ho tasto centrale, questo effetto si verifica.

Un buon esempio di ciò che alcuni codice JavaScript deve è:

Processo alcuni dati, quindi inviare fuori una richiesta XHR che ha bisogno di essere completato prima di consentire all'utente di continuare con il link che cliccato sopra.

Come si aggira questo? per esempio. ci sono modi per rilevare se l'utente si è aspettato che il link appaia nella nuova scheda e, in tal caso, è possibile caricare una nuova scheda? Forse sto pensando a questo nel modo sbagliato?

Answer 1

event.button può essere utilizzato per identificare il pulsante del mouse su cui è stato fatto clic. Il tasto centrale ritorna 1.

L'oggetto event contiene anche le proprietà event.ctrlKey, event.altKey e event.shiftKey che sono auto-esplicativi. I loro valori sono true se vengono premuti i tasti corrispondenti e false in caso contrario.

---

Il comportamento che si vuole ottenere: http://jsfiddle.net/pratik136/nCdhv/9/

html:

<a id="smart" href="http://www.bbc.co.uk/">Click</a>​ 

JS:

$(function() { 
    $('#smart').on('click', function(event) { 
     if (event && event.button && event.button === 1) { 
      event.preventDefault(); 
      window.open($('#smart').attr('href'), '_blank'); 
      return false; 
     } else { 
      return true; 
     } 
    }); 
});​ 

---

src: https://developer.mozilla.org/En/DOM/Event.button
supporto del browser: http://help.dottoro.com/ljaxplfi.php

Answer 2

Per ottenere un comportamento coerente in tutti i browser, impostare l'attributo href del link su un valore appropriato prima l'utente fa clic su di esso. Quindi spetta all'utente determinare se il collegamento debba essere aperto nella stessa finestra, in una nuova finestra o in una scheda.

ad es.

<a href="http://www.apple.com" onclick="this.href='http://www.google.com'">Apple</a> 

In IE 9 e Firefox, click sinistro apre Google, ctrl + click sinistro si aprirà Apple in una nuova scheda, come sarà tasto destro del mouse e selezionando "Apri link in una nuova scheda". L'unico modo per risolvere questo è impostare l'href prima che l'utente faccia clic sul link.

Un evento di clic probabilmente non verrà inviato per clic intermedi o di destra sui collegamenti.

Se il collegamento è stato fatto clic e il pulsante Indietro viene utilizzato per tornare alla pagina, l'href del collegamento potrebbe essere l'originale o rimanere modificato dallo script.

La linea di fondo è lasciare che i collegamenti si comportino come collegamenti. Se è richiesto un altro comportamento, utilizzare i pulsanti o un diverso oggetto dell'interfaccia utente.

Answer 3

Questo non risponde esattamente alla domanda, ma alla domanda di fondo. Un mio amico ha capito che $.ajax ha un'opzione async: false.

$(function() { 
    $('a').click(function(e) { 
     $.ajax({url: '/', async: false}).done(function(d) { alert('hello ' + d) }) 
    }) 
})​ 

Fiddle: http://jsfiddle.net/gakman/7qdXE/

Questo bloccherà l'evento href="" click raggiungimento di una risposta Ajax è tornato, continuando con qualsiasi scheda/finestra il link era diretto.

Dice anche "questa è la cosa peggiore di sempre" che è assolutamente vera.