标签：
web移动端触摸事件的范例~~~
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;"> 5 <title>web移动端触摸滑动事件</title> 6 <meta name="description" content="web移动端触摸滑动事件"/> 7 <meta name="viewport" content="user-scalable=no"> 8 </head> 9 <body> 10 <div style="position:relative;left:10px;top:10px;height: 100px;width: 200px;background: blue;" id="slider"></div> 11 <script> 12 var slider = { 13 //判断设备是否支持touch事件 14 touch: (‘ontouchstart‘ in window) || window.DocumentTouch && document instanceof DocumentTouch, 15 slider: document.getElementById(‘slider‘), 16 //事件 17 events: { 18 slider: this.slider, //this为slider对象 19 handleEvent: function (event) { 20 var self = this; //this指events对象 21 if (event.type == ‘touchstart‘) { 22 self.start(event); 23 } else if (event.type == ‘touchmove‘) { 24 self.move(event); 25 } else if (event.type == ‘touchend‘) { 26 self.end(event); 27 } 28 }, 29 //touchstart 30 start: function (event) { 31 event.preventDefault(); //阻止浏览器的默认事件 32 var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch，取第一个touch 33 startPos = {x: touch.clientX, y: touch.clientY}; //取第一个touch的坐标值 34 sliderX = parseInt(this.slider.style.left); //获取触摸时滑动块的初始位置 35 sliderY = parseInt(this.slider.style.top); 36 this.slider.addEventListener(‘touchmove‘, this, false); 37 this.slider.addEventListener(‘touchend‘, this, false); 38 }, 39 //touchmove 40 move: function (event) { 41 //当屏幕有多个touch或者页面被缩放过，就不执行move操作 42 if (event.targetTouches.length > 1 || event.scale && event.scale !== 1) return; 43 var touch = event.targetTouches[0]; 44 endPos = {x: touch.clientX - startPos.x, y: touch.clientY - startPos.y}; //获取所移动的距离 45 event.preventDefault(); //阻止触摸事件的默认行为，即阻止滚屏 46 this.slider.style.left = (sliderX + endPos.x ) + ‘px‘; 47 this.slider.style.top = (sliderY + endPos.y) + ‘px‘; 48 49 }, 50 //滑动释放 51 end: function (event) { 52 //解绑事件 53 this.slider.removeEventListener(‘touchmove‘, this, false); 54 this.slider.removeEventListener(‘touchend‘, this, false); 55 } 56 }, 57 58 //初始化 59 init: function () { 60 var self = this; //this指slider对象 61 if (!!self.touch) self.slider.addEventListener(‘touchstart‘, self.events, false); //addEventListener第二个参数可以传一个对象，会调用该对象的handleEvent属性 62 } 63 }; 64 slider.init(); 65 </script> 66 </body> 67 </html>
标签：
原文地址：http://www.cnblogs.com/Tridacna/p/4564002.html
