Cliquez sur événement appelé deux fois sur touchend dans l'iPad
j'utilise jQuery animate pour la diapositive. J'ai une flèche à la fin de la diapositive et compte tenu de l'événement de clic sur la flèche. Le travail de celui-ci est de déplacer un élément à l'intérieur du silde sur le clic et déplacer le silde entier sur mousedown. Cela fonctionne bien dans le bureau, mais dans iPad deux éléments viennent à l'intérieur de la diapositive à la fois sur le clic. Je ne comprends pas pourquoi l'événement click est appelé deux fois dans iPad. Le code d'exemple pour le clic est:
$('#next_item').bind('mousedown touchstart MozTouchDown',function(e) {
$('.slide').animate({left:left},6000);
});
$('#next_item').bind('mouseup touchend MozTouchRelease',function(e) {
No.nextItem();
});
#next_item est l'id de la flèche à la fin de la diapositive. J'ai essayé de unbind touchstart et touchend événement, mais pendant le rouleau de la diapositive en raison de débiner l'article ne vient pas à l'intérieur de la diapositive après un seul article. No.nextItem() déplace un élément à l'intérieur de la diapositive. left dans $('.slide') est de déplacer le faites glisser vers la gauche. S'il vous plaît aidez-moi à trouver la solution pourquoi cela se produit et comment résoudre ce problème pour ipad.
2 réponses
iPad à la fois comprend touchstart/-end et mousestart/-end.
Is se fait virer comme ceci:
┌─────────────────────┬──────────────────────┬─────────────────────────┐
│Finger enters tablet │ Finger leaves tablet │ Small delay after leave │
├─────────────────────┼──────────────────────┼─────────────────────────┤
│touchstart │ touchend │ mousedown │
│ │ │ mouseup │
└─────────────────────┴──────────────────────┴─────────────────────────┘
vous devez détecter si l'utilisateur est sur une tablette et puis relayer sur les choses de départ tactile...:
/********************************************************************************
*
* Dont sniff UA for device. Use feature checks instead: ('touchstart' in document)
* The problem with this is that computers, with touch screen, will only trigger
* the touch-event, when the screen is clicked. Not when the mouse is clicked.
*
********************************************************************************/
var isIOS = ((/iphone|ipad/gi).test(navigator.appVersion));
var myDown = isIOS ? "touchstart" : "mousedown";
var myUp = isIOS ? "touchend" : "mouseup";
et liez-le comme ceci:
$('#next_item').bind(myDown, function(e) {
vous pouvez également faire un événement qui prend soin de lui, voir:
http://benalman.com/news/2010/03/jquery-special-events /
de Base normalisée de l'événement:
$.event.special.myDown = {
setup: function() {
var isIOS = ((/iphone|ipad/gi).test(navigator.appVersion));
var myDown = isIOS ? "touchstart" : "mousedown";
$(this).bind(myDown + ".myDownEvent", function(event) {
event.type = "myDown";
$.event.handle.call(this, event);
});
},
teardown: function() {
$(this).unbind(".myDownEvent");
}
};
après jQuery 1.9.0 $.event.handle changé de nom en $.event.dispatch , pour soutenir les deux, vous pouvez écrire utiliser ce repli:
// http://stackoverflow.com/questions/15653917/jquery-1-9-1-event-handle-apply-alternative
// ($.event.dispatch||$.event.handle).call(this, event);
$.event.special.myDown = {
setup: function() {
var isIOS = ((/iphone|ipad/gi).test(navigator.appVersion));
var myDown = isIOS ? "touchstart" : "mousedown";
$(this).bind(myDown + ".myDownEvent", function(event) {
event.type = "myDown";
($.event.dispatch||$.event.handle).call(this, event);
});
},
teardown: function() {
$(this).unbind(".myDownEvent");
}
};
soyez prudent avec L'utilisation d'un sniffer UA pour iPad/iPod. Vous abandonnez tous les appareils Android avec une solution comme ça! Une meilleure solution est de détecter le support tactile, il fonctionnera sur tous les appareils mobiles / tablettes:
var isTouchSupported = "ontouchend" in document;