$(document.)click () ne fonctionne pas correctement sur iPhone. jquery [dupliquer]
cette question a déjà une réponse ici:
cette fonction fonctionne parfaitement sur IE, Firefox et Chrome, mais sur l'iPhone, elle ne fonctionnera qu'en cliquant sur un <img> . En cliquant sur le page (n'importe où, mais sur une img) ne le feu de l'événement.
$(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?
8 réponses
brève réponse:
<style>
.clickable-div
{
cursor: pointer;
}
</style>
plus longue réponse:
il est important de se rendre compte que si vous utilisez simplement les étiquettes <a> , tout fonctionnera comme prévu. Vous pouvez cliquer ou faire glisser par erreur sur un 151940920" lien sur un iPhone et tout se que l'utilisateur pourrait s'attendre.
j'imagine que vous avez arbitraire HTML qui n'est pas cliquable - comme un panneau contenant du texte et des images qui ne peuvent pas être enveloppés avec <a> . J'ai découvert ce problème quand j'ai eu un 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 html data-href qui est montré 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 iPad peu importe combien vous cliquez.
vous pourriez être tenté de changer votre gestionnaire d'événements de click à click touchstart - et cela déclenche en effet le gestionnaire d'événements. Cependant si l'utilisateur veut faire glisser la page vers le haut (pour faire défiler) ils vont déclencher aussi - qui est une expérience utilisateur terrible. [vous avez peut-être remarqué ce comportement par sneaky bannière ads]
le la réponse est incroyablement simple: vient de définir le css cursor: pointer .
<style>
.clickable-div
{
cursor: pointer;
}
</style>
ceci a eu l'avantage supplémentaire pour les utilisateurs de bureau pour indiquer la zone est cliquable avec une icône de main.
ajouter le code suivant fonctionne.
Le problème est que les iPhones ne pas soulever cliquez sur événements. Ils soulèvent de "toucher" les événements. Merci beaucoup pomme. Pourquoi n'ont-ils pas pu le garder standard comme tout le monde? Bref, 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);
}
Modifiez ce qui suit:
$(document).click( function () {
à ce
$(document).on('click touchstart', function () {
peut-être que cette solution ne convient pas à votre travail et comme décrit sur les réponses ce n'est pas la meilleure solution à appliquer. S'il vous plaît, vérifiez d'autres corrections d'un autre utilisateur.
essayez ceci, s'applique seulement à l'iPhone et l'iPod donc vous ne faites pas tout bleu sur chrome ou firefox mobile;
/iP/i.test(navigator.userAgent) && $('*').css('cursor', 'pointer');
en gros, sur iOS, les choses ne sont pas" cliquables "par défaut -- elles sont" touchables "(pfffff) donc vous les rendez" cliquables " en leur donnant un curseur pointeur. fait sens total, droit??
CSS Cursor:Pointer; est une excellente solution. FastClick https://github.com/ftlabs/fastclick est une autre solution qui ne vous oblige pas à changer css si vous ne voulez pas Cursor:Pointer; sur un élément pour une raison quelconque. J'utilise fastclick maintenant de toute façon pour éliminer le retard de 300ms sur les appareils iOS.
sur mobile iOS l'événement click ne fait pas de bulle vers le corps du document et ne peut donc pas être utilisé avec .live() des événements. Si vous devez utiliser un élément non native click-able comme un div ou une section est d'utiliser curseur: pointer; dans votre css pour le non-hover sur l'élément en question. Si c'est laid vous pourriez regarder dans les délégué().
incluez ceci à votre projet. Vérifiez le "Readme" sur github. https://github.com/tomasz-swirski/iOS9-Safari-Click-Fix