移动端网页上下滑动的事件

前面写过1篇 jquery mobile.js的swipe事件，来实现开关按钮的效果。查看资料后发现，swipe事件左右事件，移动端的上下滑动事件并不是用swipe.

网上搜索之后，发现移动端的原生事件touch可以解决这个问题。touch事件

本文例子的要求是：上下滑动超过给定的像素，隐藏/显示页面的元素。开始是隐藏的状态。

注意，touch事件并需要引入任何的js库。

<!DOCTYPE html>
<html id="a">
<head lang="en">
    <meta charset="UTF-8">
    <title>1元许愿</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <style>
	.div1{width:200px;height:200px;background:#F00;}
	</style>
    </head>
<body class="bg-home">
	<div class="div1">
    
    </div>
<section class="padding-bottom-80" data-tag="css-nav">

</section>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$('.div1').bind('click',function(){
	alert('a');
	})
</script>

<script>
//touch事件相关的的代码
		var startX, startY, endX, endY;
	
	    document.getElementById("a").addEventListener("touchstart", touchStart, false);
        document.getElementById("a").addEventListener("touchmove", touchMove, false);
        document.getElementById("a").addEventListener("touchend", touchEnd, false);
	
	
	 		function touchStart(event) {
                var touch = event.touches[0];
                startY = touch.pageY;
                startX = touch.pageX;
            }
            function touchMove(event) {
                var touch = event.touches[0];
                endY = startY - touch.pageY;
                endX = startX - touch.pageX;
            }
			
			
            function touchEnd(event) {
				//100是给定触上下方向摸起始的坐标差
                if (endY >100||endY<-100) {
					//jquery中的toggle()方法
                    $(".div1").toggle();
                }
				//如果不重置，会出现问题
				endY = 0;
				
			}
			
			$("html").attr("id","a")
</script>
</body>
</html>

上面的例子，最好在手机浏览器里测试。当手指上下滑动超过给定的值，div的display属性就会切换。

移动端网页上下滑动的事件

推荐阅读