s94-web/cjs/s94_Touch.js

常用的web工具方法封装---牧人与鱼

var s94_web = require('s94-web');

var s94_Touch = (function (global){
    let document = global?.document;
    if (!document) return console.error('缺少 document 对象！');

    let Touch = {
        getKey: function(etype){return 'touchEventCallbackList-'+etype;},
        eventName: "ontouchend" in document ? {start: 'touchstart', move: 'touchmove', end: 'touchend'} : {start: 'mousedown', move: 'mousemove', end: 'mouseup'},
        on: function(dom, etype, callback){
            if(typeof(Touch['on'+etype])==="undefined") return false;
            for (var i = 0,args=[]; i < arguments.length; i++) {
                args.push(arguments[i])
            }
            args.splice(1,1);
            Touch['on'+etype].apply(Touch, args);
        },
        off: function(dom, etype){
            if(typeof(Touch['on'+etype])==="undefined") return false;
            var k = Touch.getKey(etype);
            dom[k] = dom[k] || [];
            for(;dom[k].length;){
                dom.removeEventListener(Touch.eventName.start,dom[k][0]);
                document.removeEventListener(Touch.eventName.move,dom[k][0]);
                document.removeEventListener(Touch.eventName.end,dom[k][0]);
                dom[k].splice(0,1);
            }
        },
        //长按
        onlong: function(dom, callback, time){
            time = time || 500;
            function ac(e){
                if(global.event.changedTouches && global.event.changedTouches.length !== 1) return;
                var xy0 = s94_web.eventOffsetScreen(e);
                var th = setTimeout(function(){
                    typeof(callback)==="function" && callback.call(dom);
                    document.removeEventListener(Touch.eventName.end, tout);
                    document.removeEventListener(Touch.eventName.move, tout);
                }, time);
                function tout(e){
                    var xy1 = s94_web.eventOffsetScreen(e);
                    if(global.event.type === Touch.eventName.end || Math.abs(xy1.x-xy0.x)>5 || Math.abs(xy1.y-xy0.y)>5){
                        th && clearTimeout(th);
                        document.removeEventListener(Touch.eventName.end, tout);
                        document.removeEventListener(Touch.eventName.move, tout);
                    }
                }
                document.addEventListener(Touch.eventName.end, tout);
                document.addEventListener(Touch.eventName.move, tout);
            }
            dom.addEventListener(Touch.eventName.start, ac);
            registry(dom, ac,'long');
        },
        //回调函数传入{type,x,y}
        onchange: function(dom, callback){
            function ac(e){
                if(global.event.changedTouches && global.event.changedTouches.length !== 1) return;
                var xy = s94_web.eventOffsetScreen(e);
                for (var name in Touch.eventName) {
                    if(global.event.type === Touch.eventName[name]){
                        if(name === 'start'){
                            document.addEventListener(Touch.eventName.end, ac);
                            document.addEventListener(Touch.eventName.move, ac);
                        }else if(name === 'end'){
                            document.removeEventListener(Touch.eventName.end, ac);
                            document.removeEventListener(Touch.eventName.move, ac);
                        }
                        callback.call(dom,{type:name,x:xy.x,y:xy.y});
                        break;
                    }
                }
            }
            dom.addEventListener(Touch.eventName.start,ac);
            registry(dom,ac,'change');
        },
        //多点移动
        onpoints: function(dom, callback, num){
            num = num || 1;
            function ac(e){
                if(!global.event.changedTouches) return;
                for (var name in Touch.eventName) {
                    if(global.event.type === Touch.eventName[name]){
                        if(name === 'start' && global.event.touches.length === num){
                            document.addEventListener(Touch.eventName.end, ac);
                            document.addEventListener(Touch.eventName.move, ac);
                        }else if(name === 'end'){
                            document.removeEventListener(Touch.eventName.end, ac);
                            document.removeEventListener(Touch.eventName.move, ac);
                        }else if(name === 'move'){
                            var xys = s94_web.eventOffsetScreen(e);
                            callback.call(dom,xys);
                        }
                        break;
                    }
                }
            }
            dom.addEventListener(Touch.eventName.start,ac);
            registry(dom, ac,'points');
        }
    };
    //注册已绑定事件的回调函数，便于移除
    function registry(dom,callback,etype){
        var k = Touch.getKey(etype);
        dom[k] = dom[k] || [];
        dom[k].push(callback);
    }
    s94_web.dom.extend({
        touchOn: function(etype, callback){
            for (var i = 0,args=[]; i < arguments.length; i++) {
                args.push(arguments[i])
            }
            this.forEach(function(dom){
                args.unshift(dom);
                Touch.on.apply(Touch, args);
                args.splice(0,1);
            })
        },
        touchOff: function(etype){
            this.forEach(function(dom){
                Touch.off(dom, etype);
            })
        }
    })

    return Touch;
})(typeof globalThis !== 'undefined' ? globalThis :
    typeof self !== "undefined" ? self :
        typeof window !== "undefined" ? window :
            typeof global !== "undefined" ? global : {});

if (typeof exports === 'object' && typeof module === 'object'){ //CommonJS
    module.exports = s94_Touch;
}