我正在为幻灯片使用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')
是向左移动幻灯片。请帮我找到解决方案,为什么会这样,以及如何解决这个问题。
答案 0 :(得分:42)
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");
}
};
答案 1 :(得分:22)
小心使用适用于iPad / iPod的UA嗅探器。你用这样的解决方案抛弃所有Android设备!更好的解决方案是检测触摸支持,它将适用于所有移动/平板电脑设备:
var isTouchSupported = "ontouchend" in document;
答案 2 :(得分:0)
扩展H Dog答案。这是对我有用的代码。
if (isTouchSupported) {
$('#playanimationbtn').off("mouseup");
$('#stopanimationbtn').off("mouseup");
$('#playanimationbtn').off("mousedown");
$('#stopanimationbtn').off("mousedown");
$('#playanimationbtn').off("click");
$('#stopanimationbtn').off("click");
document.getElementById("playanimationbtn").addEventListener("touchend", PlayAnimation);
document.getElementById("stopanimationbtn").addEventListener("touchend", StopAnimation);
} else {
$('#playanimationbtn').off("touchstart");
$('#playanimationbtn').off("touchend");
$('#playanimationbtn').off("touchmove");
$('#playanimationbtn').off("touchend");
$('#playanimationbtn').off("touchleave");
$('#stopanimationbtn').off("touchstart");
$('#stopanimationbtn').off("touchend");
$('#stopanimationbtn').off("touchmove");
$('#stopanimationbtn').off("touchend");
$('#stopanimationbtn').off("touchleave");
document.getElementById("playanimationbtn").addEventListener("click", PlayAnimation);
document.getElementById("stopanimationbtn").addEventListener("click", StopAnimation);
}