iPad/iPhone-Hover-Problem führt dazu, dass der Benutzer doppelt auf einen Link klickt

Question

Ich habe einige Websites, die ich vor einiger Zeit gebaut habe, die Jquery-Mausereignisse verwenden... Ich habe gerade ein iPad bekommen und bemerkt, dass alle Mouse-Over-Ereignisse in Klicks übersetzt werden... so muss ich zum Beispiel zwei Klicks statt einem machen (der erste Hover, dann der eigentliche Klick)

Gibt es einen Workaround, um dieses Problem zu lösen? vielleicht ein Jquery-Befehl, den ich anstelle von mouseover/out etc. verwendet haben sollte. Danke!

Answer 1

Die Antwort von MacFreak war sehr hilfreich für mich. Hier ist einige Hands-on-Code, falls es Ihnen hilft.

PROBLEM - Anwendung berührend bedeutet, dass jedes Mal, wenn Sie mit dem Finger über ein Element fahren, dieses so reagiert, als hätten Sie es gedrückt, auch wenn Sie nur versuchen, daran vorbeizurollen.

Ich erstelle einen Effekt mit jQuery, der eine Linie unter einigen Schaltflächen einblendet, um die verweilende Schaltfläche "hervorzuheben". Ich möchte nicht, dass dies bedeutet, dass Sie die Schaltfläche zweimal auf Touch-Geräte drücken müssen, um den Link zu folgen.

Hier sind die Schaltflächen:

<a class="menu_button" href="#">
    <div class="menu_underline"></div>
</a>

Ich möchte, dass das "menu_underline"-Div bei Mouseover aufblendet und bei Mouseout ausblendet. ABER ich möchte, dass Touch-Geräte in der Lage sein, den Link auf einen einzigen Klick zu folgen, nicht zwei.

LÖSUNG - Hier ist die jQuery, damit es funktioniert:

//Mouse Enter
$('.menu_button').bind('touchstart mouseenter', function(){
    $(this).find(".menu_underline").fadeIn();
});

//Mouse Out   
$('.menu_button').bind('mouseleave touchmove click', function(){
    $(this).find(".menu_underline").fadeOut();
});

Vielen Dank für Ihre Hilfe in dieser Sache, MacFreak.

Answer 2

Vermeiden Sie die Änderung des "display"-Stils innerhalb des Hover-CSS-Ereignisses. Ich hatte "display: block" im schwebenden Zustand. Nach dem Entfernen ging ios auf lins durch einfaches Tippen. Durch die Art und Weise scheint es, dass die neuesten IOS-Updates dieses "Feature" behoben

Answer 3

Der einfachste Weg, den Doppelklick auf dem IPad zu beheben, ist die Einbettung des CSS für den Hover-Effekt in Media Query @media (pointer: fine) :

@media (pointer: fine) {
  a span {
    display: none;
  }
  a:hover span {
    display: inline-block;
  }
}

CSS, das in diese Medienabfrage eingeschlossen ist, wird nur auf dem Desktop angewendet.

Eine Erläuterung dieser Lösung finden Sie hier https://css-tricks.com/annoying-mobile-double-tap-link-issue/

Answer 4

Dies funktioniert für mich, wenn Sie jquery ui Dropdown haben

if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
      $('.ui-autocomplete').off('menufocus hover mouseover');
}

Answer 5

Dank an MacFreeks Antwort Ich habe diese Lösung gefunden. Es wurde ein bisschen fortgeschrittener, als ich entdeckte, dass manchmal gab es zwei mousemove Ereignisse in einer Reihe, wo der Klick-Ereignis nicht ausgelöst wurde.

(function () {
    //https://stackoverflow.com/a/42162450/3717718
    function isIosSafari() {
        var ua = (window.navigator && navigator.userAgent) || '';
        var iOS = !!ua.match(/iPad/i) || !!ua.match(/iPhone/i);
        var webkit = !!ua.match(/WebKit/i);
        var iOSSafari = iOS && webkit && !ua.match(/CriOS/i);
        return iOSSafari;
    }
    (function removeHoverIosSafari() {
        if (!isIosSafari()) return;

        // Tags of interest
        function shouldPrevent(target) {
            var tagName = target.tagName.toLowerCase();
            var datasetBind = target.dataset.bind;
            var preventFilter = (datasetBind && datasetBind.indexOf('click') > -1) || (tagName == 'a' || tagName == 'button');
            return preventFilter;
        }
        var eventSelector = {
            touchend: function (_, target) {
                // Reset on touchend
                target.dataset._clicked_ = '';
                target.dataset._mousemove_ = '0';
                target.dataset._timeOutId_ = '';
            },
            mouseover: function (e) {
                e.preventDefault();
            },
            mousemove: function (e, target) {
                e.preventDefault();

                var _mousemoves = +(target.dataset._mousemove_ || '0');
                _mousemoves = _mousemoves + 1;
                console.log('mousemoves: ' + _mousemoves);
                target.dataset._mousemove_ = _mousemoves;
                if (_mousemoves > 1 && !target.dataset._timeOutId_) {
                    var id = setTimeout(function () {
                        console.log('double mousemove click fired');
                        target.click();
                    }, 80); // 80ms worked for me, could probably be lower
                    target.dataset._timeOutId_ = id;
                }
            },
            click: function (e, target) {
                if (target.dataset._clicked_) {
                    console.log('prevented doubleclick');
                    e.preventDefault();
                    return;
                }
                // prevent timeout click
                if (target.dataset._timeOutId_) {
                    console.log('cleared timeout');
                    clearTimeout(+target.dataset._timeOutId_);
                }
                // mark element as clicked
                target.dataset._clicked_ = 'true';
            }
        }
        function preventHover(e) {
            var target = e.target;
            //There is no point in continuing if the item for unknown reasons doesnt't have a clickFunction, tagName or dataset (DOMStringMap)
            if (!(target && target.click && target.tagName && target.dataset)) return;
            if (!shouldPrevent(target)) return;
            var type = e.type;
            console.log(type, target);
            eventSelector[type] && eventSelector[type](e, target);
        }

        document.addEventListener('touchend', preventHover, true);
        document.addEventListener('mouseover', preventHover, true);
        document.addEventListener('mousemove', preventHover, true);
        document.addEventListener('click', preventHover, true);
    })();
})();