【发布时间】:2011-11-02 23:01:32
【问题描述】:
我为 jQuery 编写了一个模拟移动事件的插件,但也支持标准的网络浏览器。这是swipeleft 和swiperight 事件的标记:
(function($) {
var settings = {
swipe_h_threshold : 30,
swipe_v_threshold : 50,
taphold_threshold : 750,
startevent : ('ontouchstart' in document.documentElement) ? 'touchstart' : 'mousedown',
endevent : ('ontouchstart' in document.documentElement) ? 'touchend' : 'mouseup'
};
// swipeleft Event:
$.fn.swipeleft = function(handler) {
return this.each(function() {
$this = $(this);
var start_x = 0;
var end_x = 0;
$this.bind(settings.startevent, function(e) {
e.stopPropagation();
e.preventDefault();
start_x = e.pageX;
$this.one(settings.endevent, function(e) {
end_x = e.pageX;
if(start_x > end_x && (start_x - end_x >= settings.swipe_h_threshold))
{
handler.call(this);
}
});
});
});
};
// swiperight Event:
$.fn.swiperight = function(handler) {
return this.each(function() {
var $this = $(this);
var start_x = 0;
var end_x = 0;
$this.bind(settings.startevent, function(e) {
e.preventDefault();
e.stopPropagation();
start_x = e.pageX;
$this.one(settings.endevent, function(e) {
end_x = e.pageX;
if(start_x < end_x && (end_x - start_x >= settings.swipe_h_threshold))
{
handler.call(this);
}
});
});
});
};
}) (jQuery);
然后我使用以下命令调用事件:
$('#my_div').swiperight(function() { self.nextCard('r'); }); $('#my_div').swipeleft(function() { self.nextCard('r'); });
这似乎在桌面浏览器上运行良好(好吧,无论如何都是 Chrome)> http://ben-major.co.uk/labs/carousel.html,但似乎在 Mobile Safari 中不起作用。 swipeleft 执行没有问题,但 swiperight 不会运行。
谁能指点一下?
【问题讨论】:
标签: javascript jquery events mobile safari