it-swarm.com.de

$ (document) .click () funktioniert auf dem iPhone nicht richtig. Jquery

Diese Funktion funktioniert perfekt auf IE, Firefox und Chrome, aber auf dem iPhone funktioniert sie nur, wenn Sie auf einen <img> klicken. Wenn Sie auf die Seite klicken (irgendwo außer auf ein Bild), wird das Ereignis nicht ausgelöst. 

$(document).ready(function () {
  $(document).click(function (e) {
    fire(e);
  });
});

function fire(e) { alert('hi'); }

Der HTML-Teil ist extrem einfach und sollte kein Problem sein. 

Irgendwelche Ideen?

102
Garrows

Das Hinzufügen in den folgenden Code funktioniert.

Das Problem ist, dass iPhones keine Klickereignisse auslösen. Sie rufen "berührende" Ereignisse hervor. Vielen Dank, Apple. Warum konnten sie es nicht einfach so halten wie alle anderen? Trotzdem danke Nico für den Tipp.

Kredit an: http://ross.posterous.com/2008/08/19/iphone-touch-events-in-javascript

$(document).ready(function () {
  init();
  $(document).click(function (e) {
    fire(e);
  });
});

function fire(e) { alert('hi'); }

function touchHandler(event)
{
    var touches = event.changedTouches,
        first = touches[0],
        type = "";

    switch(event.type)
    {
       case "touchstart": type = "mousedown"; break;
       case "touchmove":  type = "mousemove"; break;        
       case "touchend":   type = "mouseup"; break;
       default: return;
    }

    //initMouseEvent(type, canBubble, cancelable, view, clickCount, 
    //           screenX, screenY, clientX, clientY, ctrlKey, 
    //           altKey, shiftKey, metaKey, button, relatedTarget);

    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent(type, true, true, window, 1, 
                          first.screenX, first.screenY, 
                          first.clientX, first.clientY, false, 
                          false, false, false, 0/*left*/, null);

    first.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
}

function init() 
{
    document.addEventListener("touchstart", touchHandler, true);
    document.addEventListener("touchmove", touchHandler, true);
    document.addEventListener("touchend", touchHandler, true);
    document.addEventListener("touchcancel", touchHandler, true);    
}
28
Garrows

Kurze Antwort:

<style>
    .clickable-div 
    {
         cursor: pointer;
    }
</style>

Längere Antwort:

Es ist wichtig zu wissen, dass, wenn Sie nur <a>-Tags verwenden, alles wie erwartet funktioniert. Sie können auf einem normalen <a>-Link auf einem iPhone klicken oder aus Versehen einen falschen Link ziehen, und alles verhält sich so, wie es der Benutzer erwarten würde.

Ich kann mir vorstellen, dass Sie über beliebiges HTML verfügen, das nicht anklickbar ist - beispielsweise ein Bedienfeld, das Text und Bilder enthält, die nicht mit <a> verpackt werden können. Ich fand dieses Problem heraus, als ich ein solches Panel hatte, das ich vollständig anklickbar wollte.

<div class='clickable-div' data-href="http://www.stackoverflow.com">

 ... clickable content here (images/text) ...

</div>

Um irgendwo in diesem Div einen Klick zu erkennen, verwende ich jQuery mit einem data-href html-Attribut, das oben angezeigt wird (dieses Attribut wurde von mir selbst entwickelt und ist kein Standard-jQuery- oder HTML-Datenattribut.)

$(document).on('click', '.clickable-div', function() {

    document.location = $(this).data('href');

});

Dies funktioniert auf Ihrem Desktop-Browser, aber nicht auf dem iPad, egal wie viel Sie anklicken.

Sie könnten versucht sein, Ihren Ereignishandler von click in click touchstart zu ändern - und dies löst tatsächlich den Ereignishandler aus. Wenn der Benutzer jedoch die Seite nach oben ziehen möchte (um einen Bildlauf durchzuführen), wird sie ebenfalls ausgelöst - was eine schreckliche Benutzererfahrung darstellt. [Sie haben dieses Verhalten möglicherweise durch hinterlistige Werbebanner bemerkt]

Die Antwort ist unglaublich einfach: Setzen Sie einfach den Code cursor: pointer

<style>
    .clickable-div 
    {
         cursor: pointer;
    }
</style>

Dies hatte den zusätzlichen Vorteil für Desktop-Benutzer, dass der Bereich mit einem Handsymbol anklickbar ist.

Dank an https://stackoverflow.com/a/4910962/16940

239
Simon_Weaver

Ändere das:

$(document).click( function () {

Zu diesem

$(document).on('click touchstart', function () {

Möglicherweise passt diese Lösung nicht zu Ihrer Arbeit und wie in den Antworten beschrieben, ist dies nicht die beste Lösung, die Sie anwenden können. Bitte überprüfen Sie andere Fixes von anderen Benutzern.

29
Fábio N Lima

probieren Sie dies aus, es gilt nur für iPhone und iPod, sodass Sie nicht alles auf Chrome oder Firefox Mobile blau werden lassen.

/iP/i.test(navigator.userAgent) && $('*').css('cursor', 'pointer');

unter iOS sind die Dinge standardmäßig nicht "anklickbar" - sie sind "berührbar" (pfffff), sodass Sie sie "anklickbar" machen, indem Sie ihnen einen Zeiger-Cursor geben. macht total Sinn, oder?

16
nrutas

CSS Cursor:Pointer; ist eine großartige Lösung. FastClickhttps://github.com/ftlabs/fastclick ist eine andere Lösung, bei der Sie nicht die CSS ändern müssen, wenn Sie Cursor:Pointer; für ein Element aus irgendeinem Grund nicht möchten. Ich verwende jetzt fastclick, um die 300ms Verzögerung bei iOS-Geräten zu beseitigen.

2
Milk Man

Auf mobilen iOS blubbert das Klickereignis nicht mit dem Dokumentkörper und kann daher nicht mit .live () - Ereignissen verwendet werden. Wenn Sie ein nicht natives klickfähiges Element wie ein div oder einen Abschnitt verwenden müssen, verwenden Sie Cursor: pointer; in Ihrer CSS für den Nicht-Hover des betreffenden Elements. Wenn das hässlich ist, könnten Sie in delegate () nachsehen.

1
fullstacklife

Fügen Sie dies Ihrem Projekt bei. Überprüfen Sie die "Readme" auf Github. https://github.com/tomasz-swirski/iOS9-Safari-Click-Fix

0
Tomasz Świrski

Verwenden Sie stattdessen jQTouch - die mobile Version von jQuery

0
lock