1. 程式人生 > >html5長按事件

html5長按事件

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="css/mui.min.css" rel="stylesheet" />
    </head>

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