HTML5触摸事件touch监听

最新推荐文章于 2024-06-12 14:30:59 发布

和尚吃肉丶

最新推荐文章于 2024-06-12 14:30:59 发布

阅读量1.5k

点赞数

分类专栏： h5

本文链接：https://blog.csdn.net/qq_27416209/article/details/53766548

版权

h5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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>