2012-08-01 18 views
7

Na przykład istnieje kod JavaScript, który zawiera moduł obsługi kliknięć, który określa, do którego użytkownika należy przekierować. Załóżmy, że jest to po prostu losowe łącze przekierowania, które jest obliczane, gdy użytkownik kliknie łącze.Zapobiegaj "przejęciu" intencji kliknięcia linku, gdy stosujesz niestandardową funkcję zdarzenia kliknięcia.

Oto kilka scenariuszy:

  • Jeśli użytkownik opuścił kliknięcia na link, intencją jest, aby użytkownik nawigacji w tej samej karcie, która współpracuje z window.location.

  • Jeśli użytkownik kliknie ten link pośrednio, okazuje się, że witryna przejęła środkowe kliknięcie i po prostu je zignorowała, przekierowując użytkownika na tę samą kartę zamiast nowej karty.

  • Ponadto, jak ktoś tylko skomentował (i skasował komentarz?), Innym scenariuszem jest modyfikator klawiszy, które mogą również sugerować przeglądarce, aby otworzyć nową kartę, a nawet nowe okno.

  • Inną propozycją jest możliwość otwarcia łącza w nowej karcie lub oknie za pośrednictwem menu kontekstowego. Jest to mniej ważne, ale zdecydowanie ten sam problem z użytecznością.

Widziałem ten problem na wielu stronach internetowych, w szczególności dla mnie, Google Analytics, gdzie prawie za każdym razem, gdy kliknąłem na środkowy przycisk, ten efekt się pojawił.

Dobrym przykładem tego, co jakiś kod JavaScript musi to:

Process niektóre dane, a następnie wysłać off wniosek XHR który musi być zakończone przed pozwalając użytkownikowi, aby przejść do linku one kliknął na.

Jak sobie z tym poradzić? na przykład czy istnieją sposoby na wykrycie, czy użytkownik oczekiwał, że link pojawi się na nowej karcie, a jeśli tak, czy możliwe jest załadowanie nowej karty? Może myślę o tym w niewłaściwy sposób?

Odpowiedz

2

event.button może służyć do identyfikacji kliknięcia przycisku myszy. środkowy przycisk powraca 1.

Przedmiotem event zawiera również właściwości event.ctrlKey, event.altKey i event.shiftKey które są oczywiste. Ich wartości to true, jeśli odpowiednie klawisze są wciśnięte, a inaczej: false.


Zachowanie chcesz osiągnąć: 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
Obsługa przeglądarki: http://help.dottoro.com/ljaxplfi.php

+0

Czy są jakieś popularne przeglądarki, które nie wywołują zdarzenia "kliknięcie" po kliknięciu środkowego elementu? – icktoofay

+0

Jeśli nie możesz podać adresu URL, do którego może przejść użytkownik, lepiej użyć pustego ("#", "javascript :;" ... itd.) Adresu URL lub w ogóle nie używać "". Możesz wykryć środkowe kliknięcia, ale nie możesz wykryć opcji w menu prawym przyciskiem myszy (otwórz w nowej karcie/oknie, skopiuj link ...). – Vatev

+0

@Vatev dlaczego musisz wykrywać opcje w menu prawego przycisku myszy? OP chce wiedzieć, jak wykrywać średnie kliknięcia. – bPratik

0

Aby uzyskać spójne zachowanie w różnych przeglądarkach, ustaw atrybut href łącza na odpowiednią wartość przed, którą użytkownik kliknie. Następnie użytkownik musi określić, czy link powinien zostać otwarty w tym samym oknie, nowym oknie lub karcie.

np.

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

W IE 9 i Firefox, kliknij lewym przyciskiem myszy otwiera Google, Ctrl + lewy przycisk myszy otworzy Apple w nowej karcie, jak będzie prawym przyciskiem myszy i wybierając polecenie „Otwórz odnośnik w nowej karcie”. Jedynym sposobem na naprawienie tego jest ustawienie href zanim użytkownik kliknie na link.

Zdarzenie kliknięcia prawdopodobnie nie zostanie wysłane dla kliknięcia pośredniego lub prawego kliknięcia.

Po kliknięciu łącza i użyciu przycisku Wstecz w celu powrotu do strony, link href może być oryginalny lub pozostać zmodyfikowany przez skrypt.

Najważniejsze jest, aby linki działały jak łącza. Jeśli wymagane jest inne zachowanie, użyj przycisków lub innego obiektu interfejsu użytkownika.

+0

Kolejnym punktem widzenia jest pytanie, kiedy należy wykonać niektóre przetwarzanie kodu JavaScript i żądania XHR, zanim użytkownik będzie mógł kontynuować kliknięty odsyłacz. Zaktualizuję pytanie tym przykładem. –

+0

Wygląda na to, że w ogóle nie powinieneś używać linków.W niektórych przeglądarkach, gdy użytkownik kliknie na skryptach linków, przestaje działać (prawdopodobnie dlatego, że przeglądarka ma zamiar nawigować w innym miejscu). – RobG

+0

Rozwiązanie takie jak to: http://support.google.com/googleanalytics/bin/answer.py?hl=pl&answer=55527 pojawia się, co przypomina moje oryginalne pytanie :) –

1

To nie odpowiada dokładnie na pytanie, ale podstawowe pytanie. Mój kumpel zdał sobie sprawę, że $.ajax ma opcję .

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

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

To zablokuje zdarzenie href="" kliknij aż powrócił ajax odpowiedź, kontynuując cokolwiek karcie/oknie link czele.

Mówi także: "to jest najgorsza rzecz w historii", co jest absolutną prawdą.