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

Keine der anderen Antworten funktioniert für mich. Meine App hat eine Menge von Ereignis-Listener, eigene Checkboxen und Links, die Listener und Links ohne Listener hat.

Ich benutze dies:

var selector = "label, a, button";
var timer;
var startX;
var startY;
$(document).on("click", selector, function (e) {
    if ($(this).data("touched") === true) {
        e.stopImmediatePropagation();
        return false;
    }
    return;
}).on("touchend", selector, function (e) {
    if (Math.abs(startX - e.originalEvent.changedTouches[0].screenX) > 10 || Math.abs(startY - e.originalEvent.changedTouches[0].screenY) > 10)
        // user action is not a tap
        return;
    var $this = $(this);
    // Visit: http://stackoverflow.com/questions/1694595/can-i-call-jquery-click-to-follow-an-a-link-if-i-havent-bound-an-event-hand/12801548#12801548
    this.click();
    // prevents double click
    $this.data("touched", true);
    if (timer)
        clearTimeout(timer);
    setTimeout(function () {
        $this.data("touched", false);
    }, 400);
    e.stopImmediatePropagation();
    return false;
}).on("touchstart", function (e) {
    startX = e.originalEvent.changedTouches[0].screenX;
    startY = e.originalEvent.changedTouches[0].screenY;
});

Answer 2

Dieses kurze Snippet scheint zu funktionieren. Lösen Sie das Klick-Ereignis aus, wenn der Link angetippt wird:

  $('a').on('touchstart', function() {
    $(this).trigger('click');
  });

Answer 3

Ich weiß, ich bin zu spät dran, aber das ist eine der einfachsten Lösungen, die ich gefunden habe:

    $('body').on('touchstart','*',function(){   //listen to touch
        var jQueryElement=$(this);  
        var element = jQueryElement.get(0); // find tapped HTML element
        if(!element.click){
            var eventObj = document.createEvent('MouseEvents');
            eventObj.initEvent('click',true,true);
            element.dispatchEvent(eventObj);
        }
    });

Dies gilt nicht nur für Links (Anker-Tags), sondern auch für andere Elemente. Ich hoffe, das hilft.

Answer 4

Damit die Links funktionieren, ohne das Touch-Scrolling zu unterbrechen, habe ich das Problem mit dem "Tap"-Ereignis von jQuery Mobile gelöst:

    $('a').not('nav.navbar a').on("tap", function () {
        var link = $(this).attr('href');
        if (typeof link !== 'undefined') {
            window.location = link;
        }
    });

Answer 5

Mit Inspiration von MacFreak habe ich etwas zusammengestellt, das für mich funktioniert.

Diese js-Methode verhindert, dass Hover auf einem iPad hängen bleibt, und verhindert, dass der Klick in einigen Fällen als zwei Klicks registriert wird. Wenn Sie in Ihrem CSS irgendwelche :hover psudo-Klassen haben, ändern Sie sie in .hover Zum Beispiel .some-class:hover in .some-class.hover

Testen Sie diesen Code auf einem iPad, um zu sehen, wie sich die css- und js-Hover-Methode unterschiedlich verhalten (nur beim Hover-Effekt). Die CSS-Schaltfläche hat keinen ausgefallenen Klick-Alarm. http://jsfiddle.net/bensontrent/ctgr6stm/

function clicker(id, doStuff) {
  id.on('touchstart', function(e) {
    id.addClass('hover');
  }).on('touchmove', function(e) {
    id.removeClass('hover');
  }).mouseenter(function(e) {
    id.addClass('hover');
  }).mouseleave(function(e) {
    id.removeClass('hover');
  }).click(function(e) {
    id.removeClass('hover');
    //It's clicked. Do Something
    doStuff(id);
  });
}

function doStuff(id) {
  //Do Stuff
  $('#clicked-alert').fadeIn(function() {
    $(this).fadeOut();
  });
}
clicker($('#unique-id'), doStuff);

button {
  display: block;
  margin: 20px;
  padding: 10px;
  -webkit-appearance: none;
  touch-action: manipulation;
}
.hover {
  background: yellow;
}
.btn:active {
  background: red;
}
.cssonly:hover {
  background: yellow;
}
.cssonly:active {
  background: red;
}
#clicked-alert {
  display: none;
}

<button id="unique-id" class="btn">JS Hover for Mobile devices<span id="clicked-alert"> Clicked</span>

</button>
<button class="cssonly">CSS Only Button</button>
<br>This js method prevents hover from sticking on an ipad, and prevents the click registering as two clicks. In CSS, if you have any :hover in your css, change them to .hover For example .some-class:hover to .some-class.hover