移动端、PC端ontouchstart、mousedown等兼容方法(hammer.js/jquery/原生)

最近项目涉及移动端手势(画div,拖拽、双指缩放、上滑删除等),我用的hammer.js。  参考地址:

http://hammerjs.github.io/

https://www.jianshu.com/p/0b0b9364f967

想要同时兼容移动端和pc端,实现鼠标(手指)按下并获得坐标,移动,抬起过程。

移动端支持的点击事件:

ontouchstart();
ontouchmove();
ontouchend();

PC端支持的点击事件:

onmousedown();
onmousemove();
onmouseup();

一、以hammer.js 的pan事件为例:

    var oBox = document.getElementById('main-cont');
    var hammer_windowsDiv = new Hammer(oBox);
    hammer_windowsDiv.get('pan').set({enable: true});

    hammer_windowsDiv.on("panstart panmove panend", function (ev) {
        switch (ev.type) {
            case "panstart":
                ...
                break;
            case "panmove":
                ...
                break;
            case "panend":
                ...
                break;
        }
    })

二、原生绑定:

    var x1, x2, y1, y2;    //按下坐标和移动时的坐标    
    var oBox = document.getElementById('main-cont');
    oBox.ontouchstart = oBox.onmousedown = function (e) {
        e = e || window.event;
        if (e.type == 'touchstart') {//移动端
            x1 = e.changedTouches[0].clientX;
            y1 = e.changedTouches[0].clientY;
        } else if (e.type == 'mousedown') {//pc端
            x1 = e.clientX;
            y1 = e.clientY;
        }
        oBox.ontouchmove = oBox.onmousemove = function (e) {
            if (e.type == 'touchmove') {//移动端
                x2 = e.changedTouches[0].clientX;
                y2 = e.changedTouches[0].clientY;
            } else if (e.type == 'mousemove') {//pc端
                x2 = e.clientX;
                y2 = e.clientY;
            }
        }
        oBox.ontouchend = document.onmouseup = function (e) {
            ...
        }
    }

三、jquery绑定:

    var x1, x2, y1, y2;    //按下坐标和移动时的坐标
    $('#main-cont').on('touchstart mousedown',function (e) {
        e = e || window.event;
        if (e.type == 'touchstart') {
            x1 = e.originalEvent.changedTouches[0].clientX; //与原生有区别
            y1 = e.originalEvent.changedTouches[0].clientY;
        } else if (e.type == 'mousedown') {
            x1 = e.clientX;
            y1 = e.clientY;
        }
        $('#main-cont').on('touchmove mousemove',function (e) {
            if (e.type == 'touchmove') {
                x2 = e.originalEvent.changedTouches[0].clientX;
                y2 = e.originalEvent.changedTouches[0].clientY;
            } else if (e.type == 'mousemove') {
                x2 = e.clientX;
                y2 = e.clientY;
            }
        }
        $(document).on('touchend mouseup',function (e) {
            ...
        })
    })

以上是我实现功能的大概思路,有问题欢迎指正!

 

  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值