HTML5触摸事件touch监听

来源：互联网发布：c 构造函数编程例子编辑：程序博客网时间：2024/05/18 18:54
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,maximum-scale=1"/>    <title></title>    <!--<script src="jquery.min.js"></script>-->    <!--<script src="zepto.min.js"></script>-->    <style>        * {            margin: 0px;            padding: 0px;        }        body, html {            width: 100%;            height: 100%;        }        div#rect {            width: 100%;            height: 100%;            background: #f00;        }    </style></head><body><!--<div class="wap" id="rect">--><!--<h2>测试#1</h2>--><!--<h2>测试#2</h2>--><!--<h2>测试#3</h2>--><!--<h2>测试#4</h2>--><!--<h2>测试#5</h2>--><!--<h2>测试#6</h2>--><!--</div>--><div id="rect"></div><script>    (function () {        var LSwiperMaker = function (o) {            var that = this;            this.config = o;            this.control = false;            this.sPos = {};            this.mPos = {};            this.dire;            this.config.bind.addEventListener('touchstart', function (e) {                return that.start(e);            }, false);            this.config.bind.addEventListener('touchmove', function (e) {                return that.move(e);            }, false);            this.config.bind.addEventListener('touchend', function (e) {                return that.end(e);            }, false);            this.config.backfn =function(o){                 console.log(o);            }        };        LSwiperMaker.prototype.start = function (e) {            var point = e.touches ? e.touches[0] : e;            this.sPos.x = point.screenX;            this.sPos.y = point.screenY;        };        LSwiperMaker.prototype.move = function (e) {            var point = e.touches ? e.touches[0] : e;            this.control = true;            this.mPos.x = point.screenX;            this.mPos.y = point.screenY;        };        LSwiperMaker.prototype.end = function (e) {            this.config.dire_h || (!this.control ? this.dire = null : this.mPos.y > this.sPos.y ? this.dire = 'D' : this.dire = 'U')            console.log(this.mPos.y);            console.log(this.mPos.y-this.sPos.y);            if (this.mPos.y - this.sPos.y <= -100) {                this.config.backfn(this);            }            this.control = false;        };        window.LSwiperMaker = LSwiperMaker;        document.addEventListener('touchmove', function (e) {            e.preventDefault();        }, false);// 禁止微信touchmove冲突    }());    var a = new LSwiperMaker({        bind: document.getElementById("rect"),  // 绑定的DOM对象        dire_h: false,     //true 判断左右， false 判断上下    })</script></body></html>
0 0