<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type='text/css'>
body,html{
width:100%;
height:100%;
overflow:hidden;
}
#p{
width:100%;
height:300px;
background:#ff7070;
position:relative;
padding-right:300px;
}
.delete{
width:300px;
height:300px;
position:absolute;
right:0px;
top:0px;
background:blue;
}</style>
</head>
<body>
<p id='p'><p class='delete'>删除</p></p>
</body>
<script type='text/javascript'>
var op=document.getElementById('p');
var startX;
var endX;
var pW=op.offsetWidth;
op.addEventListener('touchstart',function(e){
startX=e.pageX;
startY=e.pageX;
},false);
op.addEventListener('touchmove',function(e){
e.preventDefault();
endX=e.pageX;
var totalX=startX-endX;
if(totalX>0){
op.style.width=(pW-300-totalX)+'px';
}
},false);</script>
</html>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
这里面的e是指的当前事件，并没有pageX的属性，
正确的用法是使用touches属性：