获取鼠标位置和手机触摸点位置

思路

获取鼠标位置和手机触摸位置的思路都是相同的：
1.是否可以获取到pageX和pageY，有直接取值
2.没有，获取clientX和clientY，这个值在不翻页的情况下是正确位置，如果翻页了还需要加上scrollLeft和scrollTop
3.减去offsetLeft和offetTop

获取鼠标和触摸事件的区别

1.鼠标光标会一直停留在屏幕上，而手指会从设备上按下、移动以及释放，所以某些时刻光标会从屏幕上消失（这就是为什么鼠标时间x,y的初始值是0，而触摸事件的初始值是null。而且需要在触摸和离开时改变状态）
2.不存在和mouseover（当鼠标指针位于元素上方时，会发生 mouseover 事件）等效的触摸事件，要么发生了一次触摸事件要么没发生，不存在手指悬停在触摸屏上的概念
3.同一时间可能发生多点触摸。某个触摸点的信息会保存在触摸事件的一个数组中。（代码中取event.touches[0]取第一个触摸点）

用到的监听事件

鼠标

• mousemove

触摸

• touchstart
• touchmove
• touchend

获取鼠标位置方法

 function captureMouse(element) {
        let mouse = {x: 0, y: 0, event: null},
            body_scrollLeft = document.body.scrollLeft,//见说明2
            body_scrollTop = document.body.scrollTop,
            element_scrollLeft = document.documentElement.scrollLeft,
            element_scrollTop = document.documentElement.scrollTop,
            offsetLeft = element.offsetLeft,//见说明3
            offsetTop = element.offsetTop;

        element.addEventListener('mousemove', function (event) {
            let x, y;

            if (event.pageX || event.pageY) {//见说明1
                x = event.pageX;
                y = event.pageY;
            } else {

                x = event.clientX + (body_scrollLeft || element_scrollLeft);//见说明4
                y = event.clientY + (body_scrollTop || element_scrollTop);
            }

            x -= offsetLeft;
            y -= offsetTop;

            mouse.x = x;
            mouse.y = y;

        }, false);
        return mouse;
    }

说明

1.因为不是所有浏览器都支持pageX和pageY所以有步骤2
2.scrollLeft和scrollTop具体概念可以自行百度，简单说就是划出屏幕的偏移量
3.offsetLeft和offetTop具体概念可以自行百度，简单说就是当前容器距离整个文档的偏移量
4.scrollLet和scrollTop使用两种获取方式原因：
document.body.scrollTop在xhtml标准网页或者更简单的说是带标签的页面里得到的结果是0
在xhtml页面获得body的坐标使用document.documentElement来取代document.body

获取触摸事件位置方法

     function captureTouch(element) {
        let touch = {x: null, y: null, isPressed: false},
            offsetLeft = element.offsetLeft,
            offsetTop = element.offsetTop;

        element.addEventListener('touchstart', function (event) {
            touch.isPressed = true;
        }, false);

        element.addEventListener('touchend', function (event) {
            touch.x = null;
            touch.y = null;
            touch.isPressed = false;
        }, false);

        element.addEventListener('touchmove', function (event) {
            let x, y, touch_event = event.touches[0];
            if (touch_event.pageX || touch_event.pageY) {
                x = touch_event.pageX;
                y = touch_event.pageY;
            } else {
                x = touch_event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
                y = touch_event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
            }

            x -= offsetLeft;
            y -= offsetTop;

            touch.x = x;
            touch.y = y;

        }, false);
        return touch;
    }

说明

1.xy初始值为null和设置isPressed(是否触摸)属性原因参考"获取鼠标和触摸事件的区别"第一条
2.在访问x,y属性之前务必确保此时有触摸点按下，否则，他们的值将为null，影响后续操作

参考书籍

1.html5+javascript动画基础
2.javascript高级程序设计（第三版）