获取鼠标位置和手机触摸点位置-白红宇

思路

获取鼠标位置和手机触摸位置的思路都是相同的：

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高级程序设计（第三版）