今天要用swipeleft这个事件，然后就找了jQuery mobile的官方文档看了一下。然后自己在里面又做了一个向右滑动的扩展，可以正常使用。但是有一个问题，向右滑动后，再往左滑动就没有反应了。但是代码里明明是给向左滑动添加了事件的。


下面是源代码：

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>swipeleft demo</title>

<link rel="stylesheet" href="jquery.mobile-1.4.5.min.css">

<script src="jquery-1.10.2.min.js"></script>

<script>

$(document).bind('mobileinit',function(){

$.mobile.changePage.defaults.changeHash = false;

$.mobile.hashListeningEnabled = false;

$.mobile.pushStateEnabled = false;

});

</script>

<script src="jquery.mobile-1.4.5.min.js"></script>

<style>

html, body { padding: 0; margin: 0; }

html, .ui-mobile, .ui-mobile body {

height: 105px;

}

.ui-mobile, .ui-mobile .ui-page {

min-height: 105px;

}

#nav {

font-size: 200%;

width:17.1875em;

margin:17px auto 0 auto;

}

#nav a {

color: #777;

border: 2px solid #777;

background-color: #ccc;

padding: 0.2em 0.6em;

text-decoration: none;

float: left;

margin-right: 0.3em;

}

#nav a:hover {

color: #999;

border-color: #999;

background: #eee;

}

#nav a.selected,

#nav a.selected:hover {

color: #0a0;

border-color: #0a0;

background: #afa;

}

div.box {

width: 30em;

height: 3em;

background-color: #108040;

}

div.box.swipeleft {

background-color: #7ACEF4;

}

div.box.swiperight {

background-color: blue;

}

</style>

</head>

<body>

<h4>Swipe the green rectangle in the left direction to change its color:</h4>

<div class="box"></div>

<script>

$(function(){

// Bind the swipeleftHandler callback function to the swipe event on div.box

$( "div.box" ).on( "swipeleft", swipeleftHandler );

$( "div.box" ).on( "swiperight", swiperightHandler );

// Callback function references the event target and adds the 'swipeleft' class to it

function swipeleftHandler( event ){

$( event.target ).addClass( "swipeleft" );

}

function swiperightHandler(event){

$( event.target ).addClass( "swiperight" );

}

});

</script>

</body>

</html>



参考：http://api.jquerymobile.com/swipeleft/