您所在的位置:小祥子 » 编程 » CSS » 正文

web移动端触摸滑动事件

时间:2015-06-09 编辑:mingnuo1 来源:本站整理

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

注意:1.如果不是内联元素,获取style的属性值前需先赋值~不然为Null. 2.亲测andriod 手机 MX4内置浏览器运行妥妥的~~但是微信浏览器并不支持~原因未找到。
 <!DOCTYPE html>
 <html>
 <head>
     <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">
     <title>web移动端触摸滑动事件</title>
     <meta name="description" content="web移动端触摸滑动事件"/>
     <meta name="viewport" content="user-scalable=no">
 </head>
 <body>
 <div style="position:relative;left:10px;top:10px;height: 100px;width: 200px;background: blue;" id="slider"></div>
 <script>
     var slider = {
         //判断设备是否支持touch事件
         touch: ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,
         slider: document.getElementById('slider'),
         //事件
         events: {
             slider: this.slider,     //this为slider对象
             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);
                 }
             },
             //touchstart
             start: function (event) {
                 event.preventDefault();                 //阻止浏览器的默认事件
                 var touch = event.targetTouches[0];     //touches数组对象获得屏幕上所有的touch,取第一个touch
                 startPos = {x: touch.clientX, y: touch.clientY};    //取第一个touch的坐标值
                 sliderX = parseInt(this.slider.style.left);            //获取触摸时滑动块的初始位置
                 sliderY = parseInt(this.slider.style.top);
                 this.slider.addEventListener('touchmove', this, false);
                 this.slider.addEventListener('touchend', this, false);
             },
             //touchmove
             move: function (event) {
                 //当屏幕有多个touch或者页面被缩放过,就不执行move操作
                 if (event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;
                 var touch = event.targetTouches[0];
                 endPos = {x: touch.clientX - startPos.x, y: touch.clientY - startPos.y};                 //获取所移动的距离
                 event.preventDefault();      //阻止触摸事件的默认行为,即阻止滚屏
                 this.slider.style.left = (sliderX + endPos.x ) + 'px';
                 this.slider.style.top = (sliderY + endPos.y) + 'px';
 
             },
             //滑动释放
             end: function (event) {
                 //解绑事件
                 this.slider.removeEventListener('touchmove', this, false);
                 this.slider.removeEventListener('touchend', this, false);
             }
         },
 
         //初始化
         init: function () {
             var self = this;     //this指slider对象
             if (!!self.touch) self.slider.addEventListener('touchstart', self.events, false);    //addEventListener第二个参数可以传一个对象,会调用该对象的handleEvent属性
         }
     };
     slider.init();
 </script>
 </body>
 </html>
关键词:移动