我正在使用jquery动画幻灯片。我在幻灯片的末尾有一个箭头,并给出了该箭头上的点击事件。它的工作是移动一个项目里面的silde点击并移动整个silde在mousedown。这在桌面上工作正常,但在iPad中,两个项目一次点击进入幻灯片。我不明白为什么点击事件在iPad中被叫两次。点击的示例代码是:
$('#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。我试图解除touchstart和touchend事件的绑定,但在滑动滚动由于取消绑定项目不会进入幻灯片单项后。 No.nextItem()移动幻灯片中的一个项目。留在$(‘。slide’)是向左移动幻灯片。请帮我找到解决这个问题的解决方案,以及如何解决ipad的这个问题。
解决方法
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,teardown: function() { $(this).unbind(".myDownEvent"); } };