web-dev-qa-db-fra.com

Comment faire fonctionner ma fonction 'clic' avec iOS

J'ai un ensemble de Div qui agissent comme des boutons. Ces boutons ont une simple fonction jQuery click () qui fonctionne dans tous les navigateurs sauf iOS.

Par exemple:

<div class="button">click me</div>

et

$('.button').click(function(){

   alert('hi');

});

Je ne sais pas pourquoi cela ne fonctionne pas sur iOS - il est clair qu'il n'y a pas de "clic" dans iOS. 

Malheureusement, je n'ai pas d'appareil iphone pour tester cela moi-même, mais mes clients me disent souvent qu'ils veulent cliquer et rien ne se passe.

Quelle est la clé pour que cela fonctionne?

jqueryios
16
willdanceforfun

Cliquez sur ": signifie que lorsqu'un événement de souris et un événement de souris se produisent sur le même élément OR, un élément est activé par le clavier.

from Jquery Bug, il y a un travail autour, ajoutez simplement "cursor: pointer" au CSS de l'élément et l'événement click fonctionnera comme prévu. et vous pouvez même voir ceci Jquery cliquez sur Ios pour obtenir de l'aide 

35
Ravi Gadag

En fait, la réponse acceptée ne fonctionnait pas pour moi .J'ai essayé d'utiliser "cursor: pointer", onclick = "" et même converti l'élément en balise d'ancrage.

Ce que j'ai fait pour que cela fonctionne est de lier l'événement touchstart au lieu de l'événement click. Pour que cela fonctionne sur toutes les plates-formes, je devais faire un vilain moche comme celui-ci:

var ua = navigator.userAgent,
event = (ua.match(/iPad/i) || ua.match(/iPhone/)) ? "touchstart" : "click";

jQuery("body").on(event, '.clickable_element', function(e) {
    // do something here
});
5
Marek Maurizio

Également basé sur La réponse de Marek , qui adapte l'événement au périphérique pour déclencher une fonction, voici un code qui force le déclenchement sur un périphérique iOS, où il y a d'abord un événement touchstart:

var UA = navigator.userAgent,
iOS = !!(UA.match(/iPad|iPhone/i));

if (iOS) {
   $(document).on('touchstart', function (e) {
       e.target.click();
   });
}
2
Matthieu Pétel

Basé sur la réponse de Marek c'est ce que je pense (c'est un peu nettoyé):

var ua = navigator.userAgent, 
pickclick = (ua.match(/iPad/i) || ua.match(/iPhone/)) ? "touchstart" : "click";

$('.clickable_element').on(pickclick, function(e) {
     // do something here
});

Il reste encore beaucoup de travail à faire au secteur en matière de normes…

MODIFIER:

N'a pas fonctionné sur les téléphones Android. A adopté une approche plus rigide:

if (document.documentElement.clientWidth > 1025) { pickclick = 'click' }
if (document.documentElement.clientWidth < 1025) { pickclick = 'touchstart' }

$('.clickable_element').on(pickclick, function(e) {
     // do something here
});
2
cptstarling

Vous pouvez utiliser ceci:

$('button').bind( "touchstart", function(){
    alert('hi');
});

Une autre solution consiste à définir le curseur de l'élément sur le pointeur et que cela fonctionne avec jQuery live and click event. Définissez-le en CSS.

0
Abhishek Singh