html5长按事件

<!doctype html>
<html>

   <body>
       <ul class="mui-table-view">
       <li class="mui-table-view-cell">Item 1</li>
       <li class="mui-table-view-cell">Item 2</li>
       <li class="mui-table-view-cell">Item 3</li>
       </ul>
       <script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
       <script src="js/mui.min.js"></script>
       <script type="text/javascript">
           mui.init({
               gestureConfig:{
                   tap: true, //默认为true
                   doubletap: true, //默认为false
                   longtap: true, //默认为false
                   swipe: true, //默认为true
                   drag: true, //默认为true
                   hold:false,//默认为false，不监听
                   release:false//默认为false，不监听
               }
           });
           //mui自带长按（需先配置mui.init-- langtap:true）
//           mui(".mui-table-view li").on('longtap',function(){
//               alert('触发长按');
//           })

           // jQuery长按
           var timeOutEvent=0;
       　　 $('.mui-table-view li').on({
           　　   touchstart: function(e){
           　　　　timeOutEvent = setTimeout(function () {
           　　　　　　//长按事件
           　　　　　　timeOutEvent = 0;
           　　　　　　alert('长按了：'+e.currentTarget.innerText);
           　　　　},800);//长按800ms，可根据需求自行更改
           　　   },
           　　   touchmove: function(){
           　　　　clearTimeout(timeOutEvent);
           　　　　timeOutEvent = 0;
           　　   },
           　　   touchend: function(){
           　　　　clearTimeout(timeOutEvent);
           　　   }
           })
       $('.mui-table-view li').on('click',function(){
          alert('点击了第'+($(this).index()+1)+'个');
       })
       </script>
   </body>

</html>

猜你喜欢