移动端、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) {
            ...
        })
    })

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