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

Dies ist nur eine Verbesserung, um eine Umleitung zu vermeiden, wenn man mit dem Finger versehentlich auf einen Link gleitet.

// tablet "one touch (click)" X "hover" > link redirection
$('a').on('touchmove touchend', function(e) {

    // if touchmove>touchend, set the data() for this element to true. then leave touchmove & let touchend fail(data=true) redirection
    if (e.type == 'touchmove') {
        $.data(this, "touchmove_cancel_redirection", true );
        return;
    }

    // if it's a simple touchend, data() for this element doesn't exist.
    if (e.type == 'touchend' && !$.data(this, "touchmove_cancel_redirection")) {
        var el = $(this);
        var link = el.attr('href');
        window.location = link;
    }

    // if touchmove>touchend, to be redirected on a future simple touchend for this element
    $.data(this, "touchmove_cancel_redirection", false );
});

Answer 2

Ich stieß auf eine ähnliche Situation, in der ich Ereignisse an die Mauseintritt/Mausausausstieg/Klick-Zustände eines Elements gebunden hatte, doch auf einem iPhone musste der Benutzer doppelt auf das Element klicken, um zuerst das Mauseintritt-Ereignis auszulösen und dann erneut, um das Klick-Ereignis auszulösen.

Ich löste dies mit einer ähnlichen Methode wie oben, aber ich nutzte das jQuery $.browser-Plugin (für jQuery 1.9>) und fügte ein .trigger-Ereignis für das Mouseenter-Bindungsereignis, wie folgt:

// mouseenter event
$('.element').on( "mouseenter", function() {
    // insert mouseenter events below

    // double click fix for iOS and mouseenter events
    if ($.browser.iphone || $.browser.ipad) $(this).trigger('click');
});
// mouseleave event
$('.element').on( "mouseleave", function() { 
    // insert mouseout events below
});
// onclick event
$('.element').on( "click", function() {
    // insert click events below
});

Der .trigger verhindert, dass das Element doppelt angeklickt werden muss, indem der .click-Eventhandler bei der Eingabe mit der Maus (oder dem ersten Klick) des Elements ausgelöst wird, wenn es auf iPhones oder iPads angezeigt wird. Es ist vielleicht nicht die eleganteste Lösung, aber sie funktioniert in meinem Fall hervorragend und nutzt ein Plugin, das ich bereits installiert hatte, und ich musste nur eine einzige Codezeile hinzufügen, um meine bestehenden Ereignisse auf diesen Geräten zu aktivieren.

Sie können das jQuery $.browser Plugin hier erhalten: https://github.com/gabceb/jquery-browser-plugin

Answer 3

Sie können verwenden click touchend ,

Beispiel:

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

Das obige Beispiel betrifft alle Links auf Touch-Geräten.

Wenn Sie nur bestimmte Links anvisieren wollen, können Sie ihnen eine Klasse zuweisen, z. B:

HTML:

<a href="example.html" class="prevent-extra-click">Prevent extra click on touch device</a>

Jquery:

$('a.prevent-extra-click').on('click touchend', function() {
    var linkToAffect = $(this);
    var linkToAffectHref = linkToAffect.attr('href');
    window.location = linkToAffectHref;
});

Zum Wohl,

Jeroen

Answer 4

Wenn Sie Modernizr verwenden, ist es, wie bereits erwähnt, sehr einfach, Modernizr.touch zu verwenden.

Ich ziehe es jedoch vor, eine Kombination aus Modernizr.touch und User-Agent-Tests zu verwenden, nur um sicherzugehen.

var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch || 
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/)  || 
deviceAgent.match(/(iemobile)/) || 
deviceAgent.match(/iphone/i) || 
deviceAgent.match(/ipad/i) || 
deviceAgent.match(/ipod/i) || 
deviceAgent.match(/blackberry/i) || 
deviceAgent.match(/bada/i));

function Tipsy(element, options) {
    this.$element = $(element);
    this.options = options;
    this.enabled = !isTouchDevice;
    this.fixTitle();
};

Wenn Sie Modernizr nicht verwenden, können Sie einfach die Modernizr.touch obige Funktion mit ('ontouchstart' in document.documentElement)

Beachten Sie auch, dass Sie durch das Testen des User Agents iemobile eine breitere Palette an erkannten Microsoft-Mobilgeräten als Windows Phone erhalten.

Answer 5

Ich hatte das gleiche Problem, aber nicht auf einem Touch-Gerät. Das Ereignis wird jedes Mal ausgelöst, wenn Sie klicken. Es gibt etwas über Ereignis Warteschlange oder so.

Meine Lösung sah jedoch folgendermaßen aus: Bei Klick-Ereignis (oder Berührung?) setzen Sie einen Timer. Wenn der Link innerhalb von X ms erneut angeklickt wird, geben Sie einfach false zurück.

Um den Timer pro Element einzustellen, können Sie Folgendes verwenden $.data() .

Dadurch kann auch das oben beschriebene Problem von @Ferdy behoben werden.