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


  2. 下面是源代码：

<!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>

 

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

<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/