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

Sie könnten prüfen navigator.userAgent wie diese:

if(!navigator.userAgent.match(/iPhone/i) || !navigator.userAgent.match(/iPad/i)) {
    //bind your mouseovers...
}

aber man müsste nach Blackberrys, Droiden und vielen anderen Touchscreen-Geräten suchen. Sie könnten auch die Mouseover nur binden, wenn der userAgent Mozilla, IE, Webkit oder Opera enthält, aber Sie müssen immer noch für einige Geräte zu screenen, weil der Droid, zum Beispiel, meldet seine userAgent-String als:

Mozilla/5.0 (Linux; U; Android 2.0.1; en-us; Droid Build/ESD56) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17

Der String des iPhone ist ähnlich. Wenn Sie nur nach iPhone, iPod, iPad, Android und Blackberry suchen, erhalten Sie vielleicht die meisten Handhelds, aber nicht alle.

Answer 2

Erstellen Sie einfach eine CSS-Medienabfrage, die Tablets und Mobilgeräte ausschließt, und fügen Sie den Hover dort ein. Sie brauchen dafür weder jQuery noch JavaScript.

@media screen and (min-device-width:1024px) {
    your-element:hover {
        /* Do whatever here */
    }
}

Und fügen Sie dies unbedingt in Ihren HTML-Kopf ein, um sicherzustellen, dass die Berechnung mit den tatsächlichen Pixeln und nicht mit der Auflösung erfolgt.

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />