js判断移动端滑动方向

问题分类

    滑动屏幕打开相应功能操作。

问题描述

    用户手动滑动屏幕，根据滑动的方向，打开相应的功能（如：向上滑摇钱树经验明细，向下滑打开任务明细，向左滑打开聚宝盆物品查看等功能），滑动事件捕获问题。

<script>
	var mybody = document.getElementsByTagName('body')[0];


	//滑动处理

	var startX, startY, moveEndX, moveEndY, X, Y;   

	mybody.addEventListener('touchstart', function(e) {


	    startX = e.touches[0].pageX;

	    startY = e.touches[0].pageY;

	});

	mybody.addEventListener('touchmove', function(e) {


	    moveEndX = e.changedTouches[0].pageX;

	    moveEndY = e.changedTouches[0].pageY;

	    X = moveEndX - startX;

	    Y = moveEndY - startY;

	    if ( X > 0 && Math.abs(X)>Math.abs(Y)) {

	    	console.log('向右');

	    }else if ( X < 0 && Math.abs(X)>Math.abs(Y)) {

	    	console.log('向左');

	    }else if ( Y > 0 && Math.abs(Y)>Math.abs(X)) {

	    	console.log('向下');
	    
	    }else if ( Y < 0  && Math.abs(Y)>Math.abs(X) ) {
	    	
	    	console.log('向上');
	    
	    }else{
	    
	    	alert('没滑动'); 
	    
	    }

	});
</script>