$ (document) .Na kliknij obsługi i standard obsługi kliknięcia zachowuje się inaczej na iOS

Question

I ogólnie wiązania kliknij koparki za pomocą formularza,

$(document).on('click', 'element', function() { ... }); 

, aby uniknąć problemów z elementami ładowane później. To był działa poprawnie w przeglądarkach desktopowych (i Chrome emulacji iPhone), ale na rzeczywiste iPhone to nie działa (i próbowałem solutions jak „cursor: pointer;”)

zauważyłem, że inny przycisk działa, przy użyciu standardu obsługi kliknięcia. Zmieniłem nowy przycisk, aby używać

$('element').click(function() { ... }); 

i zaczął działać. Dlaczego te dwie metody zastosowania obsługi kliknięć działają inaczej w systemie iOS?

Answer 1

I spojrzał na kodzie źródłowym jQuery, i są takie same (zarówno .click i on('click') użyć tej samej funkcji, która jest .on.

.Kliknij

jQuery.each(("blur focus focusin focusout resize scroll click dblclick " + 
    "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " + 
    "change select submit keydown keypress keyup contextmenu").split(" "), 
    function(i, name) { 

    // Handle event binding 
    jQuery.fn[ name ] = function(data, fn) { 
     return arguments.length > 0 ? 
      this.on(name, null, data, fn) : 
      this.trigger(name); 
    }; 
}); 

jako możesz zobaczyć, $.click ostatecznie wywoła .on (lub .trigger jeśli nie ma żadnych argumentów, co nie jest twoim przypadkiem)

Answer 2

Myślę, że dzieje się tak z powodu opóźnienia wynoszącego 300 ms w przeglądarkach mobilnych.

Według Google:

... przeglądarek mobilnych będzie czekać około 300ms od chwili, dotknięciu przycisku na ogień zdarzenie click. Powodem tego jest , że przeglądarka czeka, aby zobaczyć, czy faktycznie wykonujesz dwukrotne dotknięcie .

wychodził sam problem dla jednego z mojego projektu klienta i do tego używałem https://github.com/ftlabs/fastclick bibliotekę eliminując 300ms opóźnienie pomiędzy fizycznym beczki i wypalania zdarzenie click w przeglądarkach mobilnych.

Możesz także spróbować https://github.com/dave1010/jquery-fast-click

W samym projekcie również w obliczu podwójnego dotknięcia problemu dla rozwijanych menu i to było również ze względu na 300ms opóźnienia.

Problem z dwukrotnym dotknięciem pojawił się w przeglądarkach/urządzeniach z Androidem, więc wykryłem agenta użytkownika i zastosowałem niestandardową funkcję do obsługi tego problemu, co może być pomocne dla Ciebie.

<?php 
if (user_agent() == 'android') { 
    $handleClick = "onclick=\"checkClicks('$base_url/index.php')\""; 
    $homePage = "#"; 
} else { 
    $handleClick = " "; 
    $homePage = "index.php"; 
} 
?> 

<!--//Script to Handle menu for mobile devices--> 
<script type="text/javascript"> 
//handle 300ms delay click in android devices 
var clicks = 0; 
function checkClicks(e) { 
    clicks = clicks + 1; 
    if (clicks == 2) { 
     window.location = e; 
    } else { 
     //do nothing 
    } 
} 
</script> 

Można również spróbować dostępnych wtyczek do obsługi tego problemu, jeśli twarz.

https://github.com/dachcom-digital/jquery-doubleTapToGo

https://github.com/zenopopovici/DoubleTapToGo

To może być pomocne dla Ciebie.

Edited

obsługi zdarzeń jest związana z elementem wyżej w drzewie DOM (w tym przypadku, dokument) i zostanie wykonane, gdy zdarzenie osiągnie ten element że pochodzi on element pasujący do selektora .

Jest to możliwe, ponieważ większość zdarzeń DOM wywołuje drzewo w miejscu, z którego pochodzi. Jeśli klikniesz na element #id, wygenerowane zostanie zdarzenie kliknięcia, które będzie przepełniać wszystkie elementy przodków (uwaga strony: w rzeczywistości jest faza poprzedzająca, zwana "fazą przechwytywania", gdy zdarzenie ma miejsce w drzewie do celu).Możesz uchwycić zdarzenie na dowolnym z tych przodków.

Drugi przykład wiąże procedurę obsługi zdarzenia bezpośrednio z elementem. Zdarzenie nadal będzie dymne (chyba że zapobiegniesz temu w procedurze obsługi), ale ponieważ program obsługi jest powiązany z celem, nie zobaczysz efektów tego procesu.

Delegując procedurę obsługi zdarzeń, można upewnić się, że jest ona wykonywana dla elementów, które nie istniały w DOM w czasie wiązania. Jeśli twój element #id został utworzony po twoim drugim przykładzie, twój przewodnik nigdy nie zostanie wykonany. Wiążąc się z elementem, o którym wiesz, że w DOM jest zdecydowanie w momencie wykonania, upewniasz się, że twój przewodnik będzie faktycznie podłączony do czegoś i może być później wykonany w razie potrzeby.

To prawdopodobnie nie działa ze względu na jeden z:

• Nie stosując najnowszą wersję jQuery
• Nie owijając swój kod wewnątrz DOM gotowy
• lub robisz coś, co powoduje, że zdarzenie nie do bańka do słuchacza w dokumencie.

Aby uchwycić zdarzenia na elementach, które są tworzone PO deklarując swoje detektory zdarzeń - powinno wiązać się z elementu nadrzędnego lub elementu wyżej w hierarchii.

Na przykład:

$(document).ready(function() { 
    // This WILL work because we are listening on the 'document', 
    // for a click on an element with an ID of #test-element 
    $(document).on("click","#test-element",function() { 
     alert("click bound to document listening for #test-element"); 
    }); 

    // This will NOT work because there is no '#test-element' ... yet 
    $("#test-element").on("click",function() { 
     alert("click bound directly to #test-element"); 
    }); 

    // Create the dynamic element '#test-element' 
    $('body').append('<div id="test-element">Click mee</div>'); 
}); 

W tym przykładzie tylko „zobowiązany do udokumentowania” alarm zostanie wyzwolony.

JSFiddle with jQuery 1.9.1