web移动端触摸事件封装

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>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值