javascript - 为什么我在手机上打开这个页面,在div上向左滑的时候结果那个删除的按钮没有推出来啊?
ringa_lee
ringa_lee 2017-04-10 17:16:25
0
1
699

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

ringa_lee
ringa_lee

ringa_lee

全員に返信(1)
伊谢尔伦
e.pageX

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

var touch = e.touches[0]; 
startX=touch.pageX;
いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート