web-dev-qa-db-fra.com

$ (document) .click () ne fonctionne pas correctement sur iPhone. jquery

Cette fonction fonctionne parfaitement sur IE, Firefox et Chrome, mais sur iPhone, elle ne fonctionnera que si vous cliquez sur un <img>. En cliquant sur la page (n'importe où sauf sur un img), l'événement ne sera pas déclenché. 

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

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

La partie HTML est extrêmement basique et ne devrait pas être un problème. 

Des idées?

javascriptjqueryiphoneclickonclick
102
Garrows

Ajouter dans le code suivant fonctionne.

Le problème est que les iPhones ne déclenchent pas d’événements de clic. Ils soulèvent des événements "tactiles". Merci beaucoup Apple. Pourquoi ne pourraient-ils pas simplement maintenir la norme comme tout le monde? En tout cas merci Nico pour le tuyau.

Crédit à: 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

Réponse courte:

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

Réponse plus longue:

Il est important de réaliser que si vous utilisez uniquement les balises <a>, tout fonctionnera comme prévu. Vous pouvez cliquer ou faire glisser par erreur sur un lien <a> normal sur un iPhone et tout se comporte comme prévu.

J'imagine que vous avez du code HTML arbitraire qui ne peut pas être cliqué, tel qu'un panneau contenant du texte et des images qui ne peuvent pas être entourés de <a>. J'ai découvert ce problème quand j'avais un tel panneau que je voulais être entièrement cliquable.

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

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

</div>

Pour détecter un clic n'importe où dans cette div, j'utilise jQuery avec un attribut data-href html présenté ci-dessus (cet attribut est inventé par moi-même et n'est pas un attribut de données jQuery ou HTML standard.)

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

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

});

Cela fonctionnera sur votre navigateur de bureau mais pas sur votre iPad, peu importe le nombre de clics.

Vous pourriez être tenté de changer votre gestionnaire d'événements de click à click touchstart - et cela déclenche effectivement le gestionnaire d'événements. Cependant, si l'utilisateur veut faire glisser la page vers le haut (faire défiler), il va également le déclencher - ce qui est une expérience utilisateur terrible. _ {[vous avez peut-être remarqué ce comportement avec des bannières publicitaires sournoises)]

La réponse est incroyablement simple: Il suffit de définir le css cursor: pointer. 

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

Cela présentait l'avantage supplémentaire pour les utilisateurs de bureau d'indiquer que la zone est cliquable avec une icône représentant une main.

Merci à https://stackoverflow.com/a/4910962/16940

239
Simon_Weaver

Change ça:

$(document).click( function () {

Pour ça

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

Peut-être que cette solution ne convient pas à votre travail et, comme indiqué dans les réponses, ce n’est pas la meilleure solution à appliquer. S'il vous plaît, vérifiez les autres correctifs d'autres utilisateurs.

29
Fábio N Lima

essayez ceci, s'applique uniquement à l'iPhone et à l'iPod afin que tout ne devienne pas bleu sur Chrome ou Firefox Mobile;

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

en gros, sur iOS, les éléments ne sont pas "cliquables" par défaut - ils sont "palpables" (pfffff), vous devez donc les rendre "cliquables" en leur donnant un curseur de pointeur. est tout à fait logique, non ??

16
nrutas

CSS Cursor:Pointer; est une excellente solution. FastClickhttps://github.com/ftlabs/fastclick est une autre solution qui ne vous oblige pas à changer le fichier CSS si vous ne voulez pas Cursor:Pointer; sur un élément pour une raison quelconque. De toute façon, j'utilise maintenant fastclick pour éliminer le délai de 300 ms sur les appareils iOS.

2
Milk Man

Sur les appareils mobiles iOS, l'événement click ne s'affiche pas dans le corps du document et ne peut donc pas être utilisé avec les événements .live (). Si vous devez utiliser un élément cliquable non natif, comme un div ou une section, utilisez cursor: pointer; dans votre css pour le non-survol sur l'élément en question. Si c'est moche, vous pouvez regarder delegate ().

1
fullstacklife

Incluez ceci dans votre projet. Vérifiez le "Readme" sur github. https://github.com/tomasz-swirski/iOS9-Safari-Click-Fix

0
Tomasz Świrski

Utilisez jQTouch à la place - la version mobile de jQuery

0
lock