web-dev-qa-db-fra.com

jquery.click () ne fonctionne pas sous iOS

HTML:

<div id="footer">
    <a class="button1 selected" id="button1" href="#"><div class="icon"></div><div class="text">Option 1</div></a>
    <a class="button2" id="button2" href="#"><div class="icon"></div><div class="text">Option 2</div></a>
    <a class="button3" id="button3" href="#"><div class="icon"></div><div class="text">Option 3</div></a>
    <a class="button4" id="button4" href="#"><div class="icon"></div><div class="text">Option 4</div></a>
</div>

JS:

$('#button1').click(function() {
    alert('button1');
});

$('#button2').click(function() {
    alert('button2');
});

Maintenant, ce script fonctionne parfaitement sur le navigateur de mon ordinateur, mais pas sur iOS. J'ai aussi essayé cette solution: $ (document) .click () ne fonctionne pas correctement sur iPhone. jquery mais ça ne marche pas.

J'utilise jQuery 1.8.3, pas jQuery Mobile (je préfère ne pas le faire).

Quelqu'un peut m'aider avec ça?

jqueryios
14
Andrei

Essayez d’ajouter un curseur de pointeur au bouton et utilisez .on pour lier un événement clic

$('#button1').css('cursor','pointer');
$(document).on('click', '#button1',  function(event) {
    event.preventDefault()
    alert('button1');
});
62
Derek

Je suis tombé sur ceci: http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html

En bref, l'une des conditions suivantes doit être remplie pour que les navigateurs iOS génèrent des événements de clic à partir d'événements tactiles:

  1. L'élément cible de l'événement est un lien ou un champ de formulaire. 
  2. L'élément cible, ou l'un de ses ancêtres, jusqu'au <body> n'incluant pas celui-ci, a un gestionnaire d'événements explicite défini pour l'un des événements de souris. Ce gestionnaire d'événements peut être une fonction vide. 
  3. L'élément cible, ou n'importe lequel de ses ancêtres jusqu'au document inclus, a une déclaration CSS curseur: pointeur.
6
Yacuzo

Une solution générale pourrait être quelque chose comme ceci:

JS

const IS_IOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

if (IS_IOS) {
    document.documentElement.classList.add('ios');
}

CSS

.ios,
.ios * {
    // causes dom events events to be fired
    cursor: pointer;
}
2
Ed Kolosovsky

La réponse de Yacuzo est la plus exhaustive . Mais je veux ajouter le quatrième tour (mon préféré):

$('div:first').on('click', $.noop);

Et peu importe que la première div soit un parent de votre élément cible ou non!

0
DUzun