需要注意两点:
1.长按会触发移动端的长按选中文本,这种情况下,要先去掉这个默认事件
2.一定要判读长按是否达到规定的时间,需要用到按下和抬起两个事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>长按删除</title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<script src="js/jquery-2.1.4.min.js"></script>
<style>
* {
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
li{
width: 100%;
height: 100px;
background: black;
margin-bottom:10px;
}
</style>
</head>
<body>
<div class="app">
<ul class="list">
<li class="list_item" data-id="0"></li>
<li class="list_item" data-id="1"></li>
<li class="list_item" data-id="2"></li>
</ul>
</div>
<script>
//长按删除功能
var liList=document.getElementsByTagName('li');
var timeout=undefined;
for(var k=0;k<liList.length;k++){
var a=document.getElementsByTagName('li')[k];
a.addEventListener('touchstart',start);
a.addEventListener('touchmove',move);
a.addEventListener('touchend',end);
function start(){
console.log($(this).data('id'));
timeout=setTimeout(function(){
alert('确定要删除吗?');
},2000);
}
function move(){
}
function end(){
clearTimeout(timeout);
}
}
</script>
</body>
</html>