需要注意兩點：
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>
移動端長按刪除事件
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。