jqeury mobile swiperight swiperight 左右滑动使用方法和遇到的问题

今天在使用jqeury mobile swiperight swiperight 左右滑动切换page页面时出现了问题，反应慢和被浏览器当成前进后退

后来百度无果，换了bing.com才找到解决方案

jQuery Mobile Swipe

swipe 事件在用户在某个元素上水平滑动超过 30px 时被触发：

实例

$("p").on("swipe",function(){
$("span").text("Swipe detected!");
});

亲自试一试

jQuery Mobile Swipeleft

swipeleft 事件在用户在某个元素上从左滑动超过 30px 时被触发：

实例

$("p").on("swipeleft",function(){
alert("You swiped left!");
});

亲自试一试

jQuery Mobile Swiperight

swiperight 事件在用户在某个元素上从右滑动超过 30px 时被触发：

实例

$("p").on("swiperight",function(){
alert("You swiped right!");
});

亲自试一试

jquery mobile 的所有事件都应该用在

$(document).ready(function(){
事件代码应该放在这里
});

左右滑动反应慢的问题问题是因为默认30PX才触发，所以改小点就可以了，使用下面代码修改

$.event.special.swipe.horizontalDistanceThreshold = 5;

当你在手机浏览器，比如QQ浏览器上使用时，你会发现左右切换变成了浏览器中的前进后退，可以使用代码来禁止他

$(this).on("swiperight",function(e){

e.stopImmediatePropagation();
//return false;
});

我完整的代码，如下面的

//如果不懂请加群，在我博客其他文章中有群号
$(document).ready(function(){

//我在一个页面中包含了5个page
$page_list_object = $('.page');

//要切换页面的link
$index_page_link_list = ['./index.html#session',
'./index.html#friends',
'./index.html#groups',
'./index.html#space',
'./index.html#config'];
//修改触发像素大小
$.event.special.swipe.horizontalDistanceThreshold = 5;
//给页面中的5个page都加上左右滑动事件
$.each($page_list_object,function($index,$item){
$(this).on("swipeleft",function(e){
$current_index = $index <4 ? $index+1 : 4;
$.mobile.changePage($index_page_link_list[$current_index]);
e.stopImmediatePropagation();
//return false;

});
$(this).on("swiperight",function(e){
$current_index = $index >0? $index-1 : 0;
$.mobile.changePage($index_page_link_list[$current_index]);
e.stopImmediatePropagation();
//return false;
});
});

});