Warum/wann muss ich zweimal tippen, um auf iOS zu klicken

Question

Ok Ich fühle mich wie verrückt ...

Ich bin auf Mobile Safari auf iOS 6.0. Ich kann keinen Reim oder Grund dafür feststellen, dass beim Klicken auf ein Element ein Klick ausgelöst wird. In vielen Fällen scheint es, dass ich einmal tippen muss, um einen Hover auszulösen und dann einen Klick auszulösen.

Die Mobile Safari spec heißt es:“... Die Strömung der durch einen Finger und zwei Fingergesten erzeugen Ereignisse bedingte ist abhängig davon, ob oder nicht das ausgewählte Element ist anklickbare oder rollbaren ... A klickbaren Element eine Verbindung ist, Formularelement, Bildkartenbereich oder jedes andere Element mit Mauszeiger, Mauszeiger, Mauszeiger oder Onclick-Handler ... Aufgrund dieser Unterschiede müssen Sie möglicherweise einige Ihrer Elemente in anklickbare Elemente ändern ... "

fährt fort und schlägt vor, dass der Entwickler "... einen Dummy onclick-Handler, onclick =" void (0) "hinzufügt, so dass Safari auf iOS das span-Element als anklickbares Element erkennt."

Meine Tests haben jedoch gezeigt, dass diese Aussagen falsch sind.

JsFiddle: http://jsfiddle.net/6Ymcy/1/

html

<div id="plain-div" onclick="void(0)">Plain Div</div> 

js

document.getElementById('plain-div').addEventListener('click', function() { 
    alert('click'); 
}); 

auf einem iPad, das Element Versuchen Sie tippen. Nichts passiert

Aber ich schweife ab. Was mir wichtig ist, ist die folgende Frage herauszufinden:

Welche Kriterien bestimmen genau, wenn beim Klicken auf ein Element ein "Klick" -Ereignis beim ersten Antippen ausgelöst wird? Im Gegensatz zum Auslösen eines "Hover" -Ereignisses beim ersten Tippen und eines "Klick" -Ereignisses beim zweiten Tippen.

In meinen Tests sind Ankerelemente die einzigen Elemente, die ich beim ersten Tippen mit einem Klick auslösen kann, und das nur gelegentlich und inkonsistent.

Hier fängt ich an, mich verrückt zu fühlen. Ich habe das Internet weit und breit gesucht und so gut wie nichts zu diesem Thema gefunden. Ist es nur ich ?! Weiß jemand, wo es Diskussionen über die Kriterien für zwei Ansätze und einen Ansatz zum Umgang mit diesen Einschränkungen gab?

Ich freue mich auf Fragen/Wünsche zu beantworten.

Danke!

Answer 1

Ich googelte herum, um zu sehen, ob ich Ihnen helfen könnte, und fand dieses Stück Code. Versuchen Sie es nach Ihren Wünschen zu ändern und sehen Sie, ob Sie das tun können, was Sie versuchen. Wenn Sie Probleme haben, es zu verstehen, lassen Sie es mich wissen, und ich werde mehr ausarbeiten.Theres auch mehr, um es hier, wo ich fand es

Jquery hover function and click through on tablet

$('clickable_element').live("touchstart",function(e){ 
    if ($(this).data('clicked_once')) { 
     // element has been tapped (hovered), reset 'clicked_once' data flag and return true 
     $(this).data('clicked_once', false); 
     return true; 
    } else { 
     // element has not been tapped (hovered) yet, set 'clicked_once' data flag to true 
     e.preventDefault(); 
     $(this).trigger("mouseenter"); //optional: trigger the hover state, as preventDefault(); breaks this. 
     $(this).data('clicked_once', true); 
    } 
}); 

Answer 2

nie die Kriterien herausgefunden, aber das mein Problem gelöst, indem sofort das Auslösen einen Klick, sobald ein Element abgegriffen wird:

https://developers.google.com/mobile/articles/fast_buttons

Ich musste eine Reihe von Ergänzungen/Änderungen an ihrem Code vornehmen, damit es richtig funktioniert, lassen Sie mich wissen, wenn Sie an meiner Methode interessiert sind, und ich werde versuchen, eine Erklärung zu posten.

Prost :)

Answer 3

hatte ich das gleiche Problem. Die einfachste Lösung besteht nicht darin, das Ereignis "mouseenter" auf iOS (oder einer touch-fähigen Zielplattform) zu binden. Wenn das nicht gebunden ist, wird das Hover-Ereignis nicht ausgelöst und der Klick wird beim ersten Antippen ausgelöst.

Answer 4

Ich löste dieses Problem, indem ich zuerst entdeckte, ob es ein iphone war, und dann das mouseup-Ereignis an die Funktion anbot, die ich aufrufen wollte.

if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))){ 
    $('foo').on('mouseup', function(){ 
     ... 
    } 
} 

Ich habe versucht, andere Ereignisse aber mouseup schien am besten zu funktionieren. Andere Ereignisse wie Touchend feuern, selbst wenn der Benutzer versucht, zu scrollen. Mouseup scheint nicht gefeuert zu werden, wenn Sie Ihren Finger nach dem Berühren ziehen.

Credit David Walsh (und ESPN) für die iPhone-Erkennung. http://davidwalsh.name/detect-iphone

Answer 5

iOS löst das Hover-Ereignis aus, wenn ein Element "display: none;" im Normalzustand und "display: block;" oder Inline-Block an: Hover.

Answer 6

Ich hatte dieses Problem mit Bootstrap, und ich fand heraus, dass der Täter der Tooltip war. Entfernen Sie den Tooltip von der Schaltfläche und Sie müssen ihn nicht mehr zweimal tippen.

Answer 7

diese alle, weil auf iOS, der erste Tipp als Hover fungiert, der zweite Tipp als Klick fungiert.

Sie können es entfernen, indem Sie dieses jQuery-Skript hinzufügen.

$('a').on('click touchend', function(e) { var el = $(this); var link = el.attr('href'); window.location = link; });

Answer 8

Es lohnt sich auch zu erwähnen, dass ‚: schweben‘ pseudo-Klasse kann verhindern ‚Klick‘ Ereignis von Feuern.

Wie in mobilen Browsern wird click manchmal verwendet, um schwebende Aktionen zu ersetzen (z. B. um das Dropdown-Menü anzuzeigen), sie können beim ersten Klick einen künstlichen "Hover" -Zustand auslösen und dann einen Klick auf den zweiten.

Siehe https://css-tricks.com/annoying-mobile-double-tap-link-issue/ für detaillierte Erklärung und Beispiele dafür.

Answer 9

Das Display: keine; Die oben erwähnte Lösung funktioniert auf iOS (nicht später als 9.3.5 getestet), aber nicht auf Android.

Eine Hacky css-only-Lösung besteht darin, die Verknüpfung unter dem Element mit einem Minus-Z-Index zu verbergen und die Verknüpfung auf einen positiven Z-Index zu bringen: hover oder first-touch (mit kleiner Übergangsverzögerung) . Ich denke, dass man mit css translate anstelle von z-index dasselbe Ergebnis erzielen könnte. Funktioniert auf iOS und Android.

Auf diese Weise können Sie einen Hover-Effekt auf einem Link auf einem Touchscreen-Gerät mit dem ersten Antippen anzeigen, ohne die URL bis zum zweiten Antippen zu aktivieren.