Wie verwende ich jQuery für ein Klickereignis in der iPhone-Webanwendung?

Wenn ich jQuery für ein einfaches Klickereignis verwende, funktioniert es nur für Links. Gibt es eine Möglichkeit, um es für Spannweiten usw. funktionieren zu lassen:

$("span.clicked").live("click", function(e){alert("span clicked!")}); $("a.clicked").live("click", function(e){alert("link clicked!")}); 

Der SPAN funktioniert in Safari, nicht jedoch in Mobile Safari (auf iPhone oder iPad), während der A-Tag in beiden funktioniert.

Sie müssen auf die Ereignisse “Touchstart” und “Touchend” hören. Fügen Sie die Listener mit jQuery hinzu …

 $('span').bind( "touchstart", function(e){alert('Span Clicked!')} ); 

Möglicherweise möchten Sie nach einem Touchstart und Touchend lauschen, damit Sie überprüfen können, ob das Element, das beim Berühren des Fingers angezielt wird, mit dem Element übereinstimmt, das beim Entfernen des Fingers ausgewählt wurde.

Ich bin sicher, dass es wahrscheinlich einen besseren Weg gibt, aber das sollte funktionieren 🙂

Edit: Es gibt einen besseren Weg! Siehe https://Stackoverflow.com/a/4910962/16940

Ich kämpfte auch damit. Nachdem ich viel herumgespielt und versucht hatte, das Problem zu lösen, stieß ich auf eine einfache Lösung.

Wenn Sie den cursor des Elements auf den pointer , funktioniert er wieder wie gewünscht mit Jquery’s Live- und Click-Ereignis. Dies kann einfach global im CSS eingestellt werden.

Sie müssen das touchstart- oder touchend-Ereignis nicht verwenden, solange das “span” -Tag (oder etwas anderes als ein “a” -Tag) eine css-Eigenschaft von:

 cursor:pointer 

Der Klick wird registriert

Sie können den Browser auch dazu bringen, Klickereignisse zu generieren, indem Sie ein leeres onclick-Attribut hinzufügen. Für einen Gürtel-und-Klammer-Ansatz für den Fall, dass beide Ansätze in einem iOS-Update nicht mehr funktionieren, können Sie Folgendes verwenden:

 $("span.clicked").live("click", function(e){alert("span clicked!")}) .attr('onclick','') .css('cursor','pointer'); 

(vorausgesetzt, Sie haben keine wirklichen Onclick-Attribute, die Ihnen nichts ausmacht)

Ich habe alles versucht und keiner der Tricks hat funktioniert. Es stellte sich heraus, dass ich Click Events nicht bekommen konnte, weil ich ein Video Element unter meinem img hatte. Videoelemente essen anscheinend Click Events.

Sie können ein leeres onclick Attribut hinzufügen, etwa so:

 Touch or Click Me jQuery('span').live('click', function() { alert('foo'); }); 

Mein Ansatz, dieses Missverständnis auf document.click zu lösen.

  1. Fügen Sie nach dem Tag body next tag in html ein

    ...

  2. Etwas Stil für dieses Tag

     `#overlaySection { position: fixed; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background: rgba(255, 255, 255, 0); cursor: pointer; visibility: hidden; opacity: 0; content: ""; } #overlaySection.active { opacity: 1; visibility: visible; }` 
  3. Einige JQuery-Mitarbeiter

    // hide overlay on document click $('#overlaySection').click(function(){ $(this).removeClass('active'); });

und die Hauptsache, dieses Overlay zu aktivieren

 $('.dropdown > span').click(function() { ... $('#overlaySection').addClass('active'); ... }); 

Ich hoffe, dieser Ansatz wird für jemanden nützlich sein. Glückliche Kodierung!