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>