web移动端触摸事件封装

最新推荐文章于 2024-08-19 19:47:14 发布

周公挚友

最新推荐文章于 2024-08-19 19:47:14 发布

阅读量1.1k

点赞数 1

分类专栏：原创文章标签： web移动端触摸事件原生js

本文链接：https://blog.csdn.net/a1272146/article/details/73289767

版权

原创专栏收录该内容

20 篇文章 1 订阅

订阅专栏

web移动端触摸事件封装。包含长按触发,点按触发，滑动触发，结束触摸等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no">
    <title></title>
    <style>
    </style>
</head>
<body>
<div id="div1"> </div>
</body>
<script>
    var onTouch={
        c:0,
        cc:5,
        t:null,
        move:false,
        x:'',
        y:'',
        stop: function () {if(onTouch.t!=null){clearTimeout(onTouch.t);}},
        init: function (callback) {onTouch.c=0;onTouch.stop();onTouch.timedCount(callback);},
        timedCount: function(callback) {onTouch.c++;console.log(onTouch.c);if(onTouch.c>onTouch.cc){onTouch.stop();callback();return null;}onTouch.t=setTimeout(function () {onTouch.timedCount(callback);},100);},
        timedCountEnd: function (callback) {if(onTouch.c<onTouch.cc){callback()}},
        touchstart: function (obj,callback) {
            obj.addEventListener('touchstart', function (event) {
                onTouch.x=parseInt(event.touches[0].clientX);
                onTouch.y=parseInt(event.touches[0].clientY);
                console.log('触摸开始');
                onTouch.init(function () {
                    callback();
                });
            }, false);
        },
        touchmove: function (obj,callback) {
            obj.addEventListener('touchmove', function (event) {
                onTouch.stop();
                onTouch.x=parseInt(event.touches[0].clientX);
                onTouch.y=parseInt(event.touches[0].clientY);
                onTouch.move=true;
                console.log('触摸滑动');
                callback();
            }, false);
        },
        touchend: function (obj,callback1,callback2) {

            obj.addEventListener('touchend', function (event) {
                onTouch.stop();
                onTouch.x=parseInt(event.changedTouches[0].clientX);
                onTouch.y=parseInt(event.changedTouches[0].clientY);
                if(onTouch.move==true){
                    callback1();
                    console.log('触摸滑动结束');
                    onTouch.move=false;
                }else{
                    onTouch.timedCountEnd(function () {
                        console.log('触摸点击结束');
                        callback2();
                    });
                }
            }, false);
        },
        touchcancel: function (obj,callback) {
            obj.addEventListener('touchcancel', function (event) {
                onTouch.stop();
                console.log('触摸取消');
                callback();
            }, false);
        },
        log: function (s) {
            console.log(s +":"+ onTouch.x + "," + onTouch.y );
        }
    };

    function loads(){
        onTouch.touchstart(document, function () {
            document.querySelector('#div1').innerHTML = "1";
           alert('长按触发');
        });
        onTouch.touchmove(document, function () {
            document.querySelector('#div1').innerHTML = "2";
        });
        onTouch.touchend(document, function () {
            document.querySelector('#div1').innerHTML = "3";
            alert('滑动结束触发');
        }, function () {
            alert('点击结束触发');
            document.querySelector('#div1').innerHTML = "4";
        });
        onTouch.touchcancel(document, function () {
            alert('取消触发');
            document.querySelector('#div1').innerHTML = "5";
        });
    }

    window.addEventListener('load',loads, false);

</script>
</html>