移动设备、手机浏览器Javascript滑动事件代码

正文 15912字数 172,518阅读

测试了三个事件：touchstart、touchmove 和 touchend，并获取了触摸时触点在页面上的坐标，根据坐标进行了左右滑动、上下滑动判断。
代码如下：

<!-- HTML5 -->
<!DOCTYPE html>
<html>
    <head>
        <title>TouchEvent测试</title>
        <meta charset="gbk">
    </head>
    <body>
        <h2>TouchEvent测试</h2>
        <br />
        <div id="version" style="border:2px solid black;background-color:yellow"></div>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <div id="result" style="border:2px solid red; color:red;">未触发事件！</div>
        <div id="test" style="border:2px solid red">
            <ul>
                <li id="li1">测试条目1</li>
                <li id="li2">测试条目2</li>
                <li id="li3">测试条目3</li>
                <li id="li4">测试条目4</li>
                <li id="li5">测试条目5</li>
                <li id="li6">测试条目6</li>
                <li id="li7">测试条目7</li>
                <li id="li8">测试条目8</li>
                <li id="li9">测试条目9</li>
                <li id="li10">测试条目10</li>
                <li id="li11">测试条目11</li>
                <li id="li12">测试条目12</li>
                <li id="li13">测试条目13</li>
                <li id="li14">测试条目14</li>
                <li id="li15">测试条目15</li>
                <li id="li16">测试条目16</li>
                <li id="li17">测试条目17</li>
                <li id="li18">测试条目18</li>
                <li id="li19">测试条目19</li>
                <li id="li20">测试条目20</li>
            </ul>
        </div>
        
        <script type="text/javascript">
            //全局变量，触摸开始位置
            var startX = 0, startY = 0;
            
            //touchstart事件
            function touchSatrtFunc(evt) {
                try
                {
                    //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等

                    var touch = evt.touches[0]; //获取第一个触点
                    var x = Number(touch.pageX); //页面触点X坐标
                    var y = Number(touch.pageY); //页面触点Y坐标
                    //记录触点初始位置
                    startX = x;
                    startY = y;

                    var text = 'TouchStart事件触发：（' + x + ', ' + y + '）';
                    document.getElementById("result").innerHTML = text;
                }
                catch (e) {
                    alert('touchSatrtFunc：' + e.message);
                }
            }

            //touchmove事件，这个事件无法获取坐标
            function touchMoveFunc(evt) {
                try
                {
                    //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
                    var touch = evt.touches[0]; //获取第一个触点
                    var x = Number(touch.pageX); //页面触点X坐标
                    var y = Number(touch.pageY); //页面触点Y坐标

                    var text = 'TouchMove事件触发：（' + x + ', ' + y + '）';

                    //判断滑动方向
                    if (x - startX != 0) {
                        text += '<br/>左右滑动';
                    }
                    if (y - startY != 0) {
                        text += '<br/>上下滑动';
                    }

                    document.getElementById("result").innerHTML = text;
                }
                catch (e) {
                    alert('touchMoveFunc：' + e.message);
                }
            }

            //touchend事件
            function touchEndFunc(evt) {
                try {
                    //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等

                    var text = 'TouchEnd事件触发';
                    document.getElementById("result").innerHTML = text;
                }
                catch (e) {
                    alert('touchEndFunc：' + e.message);
                }
            }

            //绑定事件
            function bindEvent() {
                document.addEventListener('touchstart', touchSatrtFunc, false);
                document.addEventListener('touchmove', touchMoveFunc, false);
                document.addEventListener('touchend', touchEndFunc, false);
            }

            //判断是否支持触摸事件
            function isTouchDevice() {
                document.getElementById("version").innerHTML = navigator.appVersion;

                try {
                    document.createEvent("TouchEvent");
                    alert("支持TouchEvent事件！");

                    bindEvent(); //绑定事件
                }
                catch (e) {
                    alert("不支持TouchEvent事件！" + e.message);
                }
            }

            window.onload = isTouchDevice;
    </script>
    </body>
</html>

Run code

Cut to clipboard

下面是jQuery Mobile实现上下滑动的方式：
jQuery Mobile左右滑动事件：swipe（水平滑动30px以上时触发）、swipeLeft（向左滑）、swipeRight（向右滑）
jQuery Mobile垂直滑动事件：scrollstart（上下滚动）、scrollend（滚动停止）
jQuery Mobile触摸点击事件：tap（快速触碰）、taphold（触碰并保持750ms以上触发）

<!DOCTYPE html>
<html>
    <head>
        <title>Ajax测试</title>
        <meta charset="gbk">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.2.0.min.css"/>
        <link rel="stylesheet" href="jquery-mobile/jquery.mobile.structure-1.2.0.min.css"/>
        <script src="jquery-mobile/jquery-1.8.2.min.js"></script>
        <script src="jquery-mobile/jquery.mobile-1.2.0.min.js"></script>
    </head>
    <body>
	    <div data-role="page" data-theme="b">
        <div data-role="header"></div>
        <div data-role="content">
            <script>
				//scrollstart事件
				function scrollstartFunc(evt) {
					try
					{
						var target = $(evt.target);
						while (target.attr("id") == undefined) {
							target = target.parent();
						}
						//获取触点目标id属性值
						var targetId = target.attr("id");

						alert("targetId: " + targetId);
					}
					catch (e) {
						alert('myscrollfunc：' + e.message);
					}
				}

				function myinit() {
					//绑定上下滑动事件
					$("#myul").bind('scrollstart', function () { scrollstartFunc(event); });
				}

				window.onload = myinit;
			</script>

			<!-- listview测试 -->
			<ul id="myul" data-role="listview" data-inset="true">
				<li data-role="list-divider">信息列表</li>
				<li id="li1" data-role="fieldcontain">信息1</li>
				<li id="li2" data-role="fieldcontain">信息2</li>
				<li id="li3" data-role="fieldcontain">信息3</li>
				<li id="li4" data-role="fieldcontain">信息4</li>
				<li id="li5" data-role="fieldcontain">信息5</li>
				<li id="li6" data-role="fieldcontain">信息6</li>
				<li id="li7" data-role="fieldcontain">信息7</li>
				<li id="li8" data-role="fieldcontain">信息8</li>
				<li id="li9" data-role="fieldcontain">信息9</li>
				<li id="li10" data-role="fieldcontain">信息10</li>
			</ul>
        </div>
    </body>
</html>

Run code

Cut to clipboard

手机移动端全屏左右手势滑动的比较好的一个例子，目前考虑了webkit内核的浏览器，没有考虑pc、windowshpone，不过是一个很好的学习的例子，希望帮助需要的人员

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">
	<title>移动端触摸滑动</title>
	<meta name="author" content="rainna" />
	<meta name="keywords" content="rainna's js lib" />
	<meta name="description" content="移动端触摸滑动" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
	<style>
	*{margin:0;padding:0;list-style:none;border:0;}
	/* body */
	body {margin:0; padding:0}
	{width:100%; margin:0 auto; overflow:hidden}
	li{list-style:none;}
	.m-slider{width:100%;margin:50px 20px;overflow:hidden;position: relative;top:0px;left:0px;height: 450px;}
	.m-slider .cnt{position:absolute;left:0px; top:0px;width:9999px;overflow:hidden;height: 450px;}
	.m-slider .cnt li{float:left;width:100%;height: 450px;}
	.m-slider .cnt img{display:block;width:100%;height:400px;}
	.m-slider .cnt p{margin:20px 0; }
	.icons{text-align:center;color:#000;position: absolute;top:500px;left:50%;}
	.icons span{margin:0 5px;}
	.icons .curr{color:red;}
	.f-anim{-webkit-transition:left .2s linear;}
	</style>
</head>

<body>
	<div class="m-slider" id="wrap">

		<ul class="cnt" id="slider">
			<li>
				<img src="http://imglf1.ph.126.net/qKodH3sZoVbPalKFtHS9mw==/6608946691259322175.jpg">
				<p>20140813镜面的世界，终究只是倒影。看得到你的身影，却触摸不到你的未来</p>
			</li>
			<li>
				<img src="http://imglf1.ph.126.net/40-jqH_j6EoCWnZOixY2pA==/4798022453110310215.jpg">
				<p>20140812锡林浩特前往东乌旗S101必经之处，一条极美的铁路。铁路下面是个小型的盐沼，淡淡的有了一丝天空之境的感觉。可惜在此玩了一个小时也没有看见一列火车经过，只好继续赶往东乌旗。</p>
			</li>
			<li>
				<img src="http://imglf0.ph.126.net/Jnmi2y51zVdjKAYlibtpFw==/3068640196117481166.jpg">
				<p>20140811水的颜色为什么那么蓝，我也纳闷，反正自然饱和度和对比度拉完就是这个颜色的</p>
			</li>
			<li>
				<img src="http://imglf1.ph.126.net/79GPsjhwiIj8e-0nP5MsEQ==/6619295294699949331.jpg">
				<p>海洋星球3重庆天气热得我想卧轨自杀</p>
			</li>
			<li>
				<img src="http://imglf1.ph.126.net/40-jqH_j6EoCWnZOixY2pA==/4798022453110310215.jpg">
				<p>以上这些作品分别来自两位设计师作为观者，您能否通过设计风格进行区分</p>
			</li>
		</ul>

	</div>
	<div class="icons" id="icons">
		<span class="curr">1</span>
		<span>2</span>
		<span>3</span>
		<span>4</span>
		<span>5</span>
	</div>
	<script>
	var util=(function () {
		var me={};
	 //获取当前样式，主要针对style:width
	 me.getStyle=function (obj,attr) {
	 	return obj.currentStyle?obj.currentStyle[attr]:document.defaultView.getComputedStyle(obj, null)[attr];
	 };
    //绑定事件
    me.bindEvent=function (obj,sEvent,fn) {
    	if(obj.addEventListener)
    	{
    		obj.addEventListener(sEvent,fn,false);
    	}
    	else
    	{
    		obj.addAttachEvent('on'+sEvent,fn);
    	}
    }
    //获取事件来源
    me.getEventTarget=function (event) {
    	return event.srcElement ? event.srcElement : event.target;
    }
    //解除事件
    me.removeEvent=function (obj,sEvent,fn) {
    	if(obj.removeEventListener)
    	{
    		obj.removeEventListener(sEvent,fn,false);
    	}
    	else
    	{
    		obj.detachEvent('on'+sEvent,fn);
    	}
    }
    return me;
})();
var scroll = {
    //判断设备是否支持touch事件
    touch:('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,
    slider:document.getElementById('slider'),
    wrap:this.slider.parentNode,//最外层容器
    wrapWidth:parseInt(util.getStyle(this.wrap,"width")),//获取最外层容器宽度
    itemList:this.wrap.getElementsByTagName('li'),//获取要滑动的列表
    events:{
        index:0,     //显示元素的索引
        slider:document.getElementById('slider'),     //this为slider对象
        icons:document.getElementById('icons'),
        icon:this.icons.getElementsByTagName('span'),
        handleEvent:function(event){
            var self = this;     //this指events对象
            if(event.type == 'touchstart'){
            	self.start(event);
            }else if(event.type == 'touchmove'){
            	self.move(event);
            }else if(event.type == 'touchend'){
            	self.end(event);
            }
        },
        //滑动开始
        start:function(event){
            var touch = event.targetTouches[0];//touches数组对象获得屏幕上所有的touch，取第一个touch
            startPos = {x:touch.pageX,y:touch.pageY,time:+new Date};    //取第一个touch的坐标值
            isScrolling = 0;   //这个参数判断是垂直滚动还是水平滚动
            util.bindEvent(this.slider,'touchmove',this);
            util.bindEvent(this.slider,'touchend',this);
        },
        //移动
        move:function(event){
            //当屏幕有多个touch或者页面被缩放过，就不执行move操作
            if(event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;
            var touch = event.targetTouches[0];
            endPos = {x:touch.pageX - startPos.x,y:touch.pageY - startPos.y};
            isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1:0;    //isScrolling为1时，表示纵向滑动，0为横向滑动
            if(isScrolling === 0){
                event.preventDefault();      //阻止触摸事件的默认行为，即阻止滚屏
                this.slider.className = 'cnt';
                this.slider.style.left = -this.index*globalWidth + endPos.x + 'px';
            }
        },
        //滑动释放
        end:function(event){
            var duration = +new Date - startPos.time;    //滑动的持续时间
            if(isScrolling === 0){    //当为水平滚动时
            	this.icon[this.index].className = '';
            	if(Number(duration) > 10){
                    //判断是左移还是右移，当偏移量大于10时执行
                    if(endPos.x > 10){
                    	if(this.index !== 0) this.index -= 1;
                    }else if(endPos.x < -10){
                    	if(this.index !== this.icon.length-1) this.index += 1;
                    }
                }
                this.icon[this.index].className = 'curr';
                this.slider.className = 'cnt f-anim';
                this.slider.style.left = -this.index*globalWidth + 'px';
            }
            //解绑事件
            util.removeEvent(this.slider,'touchmove',this);
            util.removeEvent(this.slider,'touchend',this);
        }
    },
    //初始化
    init:function(){
    	this.initWidth();
        var self = this;     //this指slider对象
        if(!!self.touch)
        {
        	util.bindEvent(self.slider,'touchstart',self.events);
        }
        else
        {
        	//alert('buzhichi ');
        }
         //addEventListener第二个参数可以传一个对象，会调用该对象的handleEvent属性
     },
     initWidth:function () {
     	var self=this;
    	//定义一个全局变量
    	globalWidth=self.wrapWidth;
    	//当前容器设置宽度
    	self.wrap.style.width=self.wrapWidth+"px";
    	console.log(self.itemList);
    	for(var i=0; i<self.itemList.length; ++i) {
    		self.itemList[i].style.cssText="float:none;display:block;position:absolute;top:0px;left:"+(i)*self.wrapWidth+"px;width:"+self.wrapWidth+"px;";
    	}
    }
};
scroll.init();
//初始化绑定iScroll控件
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
</script>
</body>
</html>

Run code

Cut to clipboard

lizhenqiu blog

移动设备、手机浏览器Javascript滑动事件代码

相关日志

暂无评论 »

留下評論