你的位置:首页 > 网页设计

[网页设计]web移动端触摸滑动事件


web移动端触摸事件的范例~~~

注意:1.如果不是内联元素,获取style的属性值前需先赋值~不然为Null.
2.亲测andriod 手机 MX4内置浏览器运行妥妥的~~但是微信浏览器并不支持~原因未找到。
 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       //touchstart30       start: function (event) {31         event.preventDefault();         //阻止浏览器的默认事件32         var touch = event.targetTouches[0];   //touches数组对象获得屏幕上所有的touch,取第一个touch33         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       //touchmove40       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>