点击iPad上的touchend两次调用的事件

我正在为幻灯片使用jquery动画。 我在幻灯片的末尾有一个箭头，并在该箭头上给出了点击事件。 它的工作是在点击时移动一个项目在silde中并在mousedown上移动整个silde。 这在桌面上运行良好，但在iPad中，一次点击就会有两个项目进入幻灯片。 我不明白为什么在iPad中调用click事件两次。 点击的示例代码是：

$('#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是幻灯片末尾箭头的id。 我试图unbind touchstart和touchend事件但是在幻灯片滚动期间由于解除绑定，项目在单个项目之后不会进入幻灯片内部。 No.nextItem()在幻灯片中移动一个项目。 left在$('.slide')是向左移动幻灯片。 请帮助我找到解决方案为什么会发生这种情况以及如何解决ipad的这个问题。

Answer 1

iPad都能理解touchstart / -end和mousestart / -end。

被解雇是这样的：

 ┌─────────────────────┬──────────────────────┬─────────────────────────┐ │Finger enters tablet │ Finger leaves tablet │ Small delay after leave │ ├─────────────────────┼──────────────────────┼─────────────────────────┤ │touchstart │ touchend │ mousedown │ │ │ │ mouseup │ └─────────────────────┴──────────────────────┴─────────────────────────┘ 

您必须检测用户是否在平板电脑上然后继续触摸启动…：

 /******************************************************************************** * * 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"; 

然后像这样绑定它：

 $('#next_item').bind(myDown, function(e) { 

您还可以制作一个照顾它的活动，请参阅：

http://benalman.com/news/2010/03/jquery-special-events/

基本归一化向下事件：

 $.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"); } }; 

在jQuery 1.9.0 $.event.handle将名称更改为$.event.dispatch ，为了支持这两种情况，您可以编写使用此回退：

 // 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"); } }; 

Answer 2

小心使用适用于iPad / iPod的UA嗅探器。 您正在放弃所有Android设备，并提供类似的解决方案！ 更好的解决方案是检测触摸支持，它将适用于所有移动/平板电脑设备：

 var isTouchSupported = "ontouchend" in document;