js屏幕触控,手机屏幕触摸

/**
 * js屏幕触控
 * @param obj 操作元素对象
 * @param type 手势类型
 * @param func 回调函数 
 * author wu7zhi 如不明白请加微信wu7zhi,回复touch了解怎么使用
 */
function touch (obj, type, func) {
    //滑动范围在5x5内则做点击处理,s是开始,e是结束
    var init = {
        x : 15,
        y : 15,
        sx : 0,
        sy : 0,
        ex : 0,
        ey : 0
    };
    var sTime = 0,
        eTime = 0;
    type = type.toLowerCase();


    obj.addEventListener("touchstart", function() {
        sTime = new Date().getTime();
        init.sx = event.targetTouches[0].pageX;
        init.sy = event.targetTouches[0].pageY;
        init.ex = init.sx;
        init.ey = init.sy;
        if (type.indexOf("start") != -1)
            func();
    }, false);

    obj.addEventListener("touchmove", function() {
        event.preventDefault();//阻止触摸时浏览器的缩放、滚动条滚动
        init.ex = event.targetTouches[0].pageX;
        init.ey = event.targetTouches[0].pageY;
        if (type.indexOf("move") != -1)
            func();
    }, false);

    obj.addEventListener("touchend", function() {
        var changeX = init.sx - init.ex;
        var changeY = init.sy - init.ey;
        if (Math.abs(changeX) > Math.abs(changeY) && Math.abs(changeY) > init.y) {
            //左右事件
            if (changeX > 0) {
                if (type.indexOf("left") != -1) {
                    func()
                };
            } else {
                if (type.indexOf("right") != -1)
                    func();
            }
        } else if (Math.abs(changeY) > Math.abs(changeX) && Math.abs(changeX) > init.x) {
            //上下事件
            if (changeY > 0) {
                if (type.indexOf("top") != -1)
                    func();
            } else {
                if (type.indexOf("down") != -1)
                    func();
            }
        } else if (Math.abs(changeX) < init.x && Math.abs(changeY) < init.y) {
            eTime = new Date().getTime();
            //点击事件,此处根据时间差细分下
            if ((eTime - sTime) > 300) {
                if (type.indexOf("long") != -1)
                    func();
                //长按
            } else {
                if (type.indexOf("click") != -1)
                    func();
                //当点击处理
            }
        }
        if (type.indexOf("end") != -1)
            func();
    }, false);
};
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值