首页 > 为什么我在手机上打开这个页面,在div上向左滑的时候结果那个删除的按钮没有推出来啊?

为什么我在手机上打开这个页面,在div上向左滑的时候结果那个删除的按钮没有推出来啊?

<!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;
}

#div{
    
    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>
<div id='div'><div class='delete'>删除</div></div>
</body>

<script type='text/javascript'>

var oDiv=document.getElementById('div');
var startX;
var endX;
var divW=oDiv.offsetWidth;
oDiv.addEventListener('touchstart',function(e){
    
    startX=e.pageX;
    startY=e.pageX;

},false);
oDiv.addEventListener('touchmove',function(e){

    e.preventDefault();
    endX=e.pageX;
    var totalX=startX-endX;
    if(totalX>0){
        oDiv.style.width=(divW-300-totalX)+'px';
    }
},false);

</script>
</html>


e.pageX

这里面的e是指的当前事件,并没有pageX的属性,
正确的用法是使用touches属性:

var touch = e.touches[0]; 
startX=touch.pageX;
【热门文章】
【热门文章】