it-swarm.com.de

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

Ok, ich fühle mich wie verrückt ...

Ich suche Mobile Safari auf iOs 6.0. Ich kann anscheinend keinen Reim oder Grund dafür feststellen, wann ein Tippen auf ein Element einen Klick auslöst. In vielen Fällen scheint es, als müsste ich einmal tippen, um einen Hover auszulösen, und dann erneut, um einen Klick auszulösen.

Die Mobile Safari spec sagt: "... Der durch Ein - Finger - und Zwei - Finger - Gesten erzeugte Ereignisfluss hängt davon ab, ob das ausgewählte Element anklickbar oder scrollbar ist oder nicht ... Ein anklickbares Element ist ein Link, Formularelement, Imagemap-Bereich oder ein beliebiges anderes Element mit MouseMove-, Mouseedown-, Mouseup- oder Onclick-Handler ... Aufgrund dieser Unterschiede müssen Sie möglicherweise einige Ihrer Elemente in anklickbare Elemente ändern ... "

Daraufhin schlägt der Entwickler vor, "... fügen Sie einen Dummy-Onclick-Handler hinzu, onclick =" void (0) ", damit Safari unter iOS das span-Element als anklickbares Element erkennt."

Mein Test hat 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'); 
});

Tippen Sie das Element auf einem iPad an. Nichts passiert

Aber ich schweife ab. Für mich ist es wichtig, die folgende Frage herauszufinden:

Welches sind die Kriterien, nach denen beim Klicken auf ein Element beim ersten Tippen ein Klick 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 einen Klick beim ersten Tippen auslösen können, und dann nur gelegentlich und inkonsistent.

Hier fange ich an, verrückt zu werden. Ich habe das Internet weit und breit durchsucht und zu diesem Problem so gut wie nichts gefunden. Ist es nur ich ?! Weiß jemand, wo es Diskussionen über die Kriterien für Two-Taps gab und/oder wie man mit diesen Einschränkungen umgehen kann?

Gerne antworte ich auf Fragen/Wünsche. 

Vielen Dank!

29
user2383672

Ich hatte das gleiche Problem. Die einfachste Lösung besteht darin, das Ereignis ' mouseenter ' nicht unter iOS (oder einer anderen berührungsfähigen Zielplattform) zu binden. Wenn dies nicht gebunden ist, wird das Hover-Ereignis nicht ausgelöst, und beim ersten Tippen wird ein Klick ausgelöst.

10

iOS löst das Hover-Ereignis aus, wenn ein Element "display: none;" im normalen Zustand und "Anzeige: Block;" oder Inline-Block ein: hover.

7
noahott

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

3
sandre89

Es lohnt sich auch zu erwähnen, dass die Pseudo-Klasse ": hover" das Auslösen des Klick-Ereignisses verhindern kann.

Da in mobilen Browsern manchmal ein Klick zum Ersetzen der Schwebefunktion verwendet wird (z. B. zum Anzeigen des Dropdown-Menüs), können sie beim ersten Klick einen künstlichen "Hover" -Status auslösen und dann den zweiten Klick ausführen.

Unter https://css-tricks.com/annoying-mobile-double-tap-link-issue/ finden Sie detaillierte Erklärungen und Beispiele dafür.

2
everyonesdesign

Ich habe dieses Problem gelöst, indem ich zuerst herausfand, ob es sich um ein iPhone handelte, und dann das Mouseup-Ereignis an die Funktion band, die ich aufrufen wollte.

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

Ich habe andere Events ausprobiert, aber Mouseup schien am besten zu funktionieren. Andere Ereignisse wie das Touchend wurden ausgelöst, auch wenn der Benutzer einen Bildlauf versuchte. Mouseup scheint nicht ausgelöst zu werden, wenn Sie Ihren Finger nach dem Berühren ziehen.

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

1
Frank

meine Lösung bestand darin, den: Hover-Status aus der CSS zu entfernen, und wenn Sie darüber nachdenken, sollten mobile Browser nicht Folgendes haben: Hover-Status, da kein Hover vorhanden ist 

wenn Sie den Hover-Status auf dem Desktop beibehalten möchten, können Sie die Medienabfrage wie folgt verwenden:

.button {
    background: '#000'
}

@media (min-width: 992px) {
    .button:hover {
        background: '#fff'
    }
}
0
Or Bachar

Ich googelte herum, um zu sehen, ob ich Ihnen helfen konnte, und fand diesen Code. Versuchen Sie es nach Ihren Wünschen zu ändern und sehen Sie, ob Sie tun können, was Sie versuchen. Wenn Sie Schwierigkeiten haben, es zu verstehen, lassen Sie es mich wissen, und ich werde mehr darauf eingehen. Es gibt auch mehr dazu hier, wo ich es gefunden habe

Jquery-Hover-Funktion und Klick auf 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);
    }
});
0
Aaron Russell

Sie benötigen @media (hover) { /* Your styles */ }

Soweit ich das beurteilen kann, ist dieses Problem in verschiedenen Formen immer noch vorhanden. 

Im Jahr 2019 können die meisten, wenn nicht alle der oben genannten Fälle jetzt verbessert werden, indem eine reine CSS-Lösung ... verwendet wird. Allerdings werden einige Stylesheet-Refactoring erforderlich.

label {
  opacity:0.6  
}

label input[type=radio]:checked+span {
  opacity:1
}

.myClass::before { } /* Leave me empty to catch all browsers */

a:link { color: blue }
a:visited { color: purple }
a:hover { } /* Leave me empty to catch all browsers */
a:active { font-weight: bold }



/* Your styles */
@media (hover) {
  a:hover { color: red }

  .myClass::before { background: black }

  label:hover {
    opacity:0.8
  }
}

Sie können hier detaillierter lesen, warum Fastclick, :pseudo, <span>, die nur auf "Desktop" -Auflösungen ausgerichtet sind, und first tap is hover and second tap is click alle mithilfe von @media (hover) behoben werden: https://css-tricks.com/annoying-mobile-double-tap-link- Problem/

:hover bietet nicht die Klarheit, die er früher als Stifteingabe tat, Touch-Desktops und Handys haben eine unterschiedliche Interpretation des Begriffs.

0
urbanaut

Die Anzeige: keine; Die oben erwähnte Lösung funktioniert auf iOS (wird nicht nach 9.3.5 getestet), jedoch nicht auf Android.

Eine gehackte reine Css-Lösung besteht darin, den Link unter dem Element mit einem Minus-Z-Index zu verbergen und den Link auf einen positiven Z-Index zu bringen: Hover oder First Touch (mit einer geringen Übergangsverzögerung). Ich denke, man könnte mit css translate anstelle von z-index dasselbe Ergebnis erzielen. Funktioniert auf iOS und Android.

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

0
peterh