整理下PC和移动获取点击、移动坐标的代码和坑

一、PC

PC是通过鼠标点击和移动，相对比较简单，比如onmousedown、onmouseup、onmousemove、onmouseout鼠标按键按下、按键起来、鼠标在元素上移动、鼠标从元素上离开。

canvas.onmousedown = function(e) {
    console.log(e.clientX, e.clientY);
}
canvas.onmouseup = function(e) {
    console.log(e.clientX, e.clientY);
}
canvas.onmousemove = function(e) {
    console.log(e.clientX, e.clientY);
}
canvas.onmouseout = function(e) {
    console.log(e.clientX, e.clientY);
}

PC端可以直接通过事件的clientX和clientY来获取点击的坐标，这个坐标(e.clientX , e.clientY)是相对于window的左上角来确定的。

同样事件参数evnet，有一些常用方法如阻止事件在浏览器中的默认操作和事件冒泡。

e.preventDefault()为阻止事件在浏览器中的默认操作，如input type为submit时的提交操作，我一般在事件函数中都会使用它，特别是在移动端。记得之前有个坑，在微信内置浏览器中，touchmove事件触发时，微信内置浏览器会默认拖动整个WebView向上或向下移动，显示出那个QQ浏览器内核什么鬼的文字，而没有执行想要的操作。

e.stopPropagation()为防止事件穿透，不调用此方法时，事件被捕获后，仍然会继续传播可能会被下方的元素事件所捕获进而造成影响。所以在元素覆盖元素，且都有绑定事件的时候需要阻止事件冒泡。

 

二、移动

移动和PC在处理事件上有些不同之处，首先事件上不同，移动这边是touchstart、touchmove、touchend这3个事件。

canvas.addEventListener("touchstart", function(e) {
    console.log(e.touches[0].pageX, e.touches[0].pageY);
});
canvas.addEventListener("touchmove", function(e) {
    if(e.touches.length > 1 || e.scale && e.scale !== 1) return;
    console.log(e.touches[0].pageX, e.touches[0].pageY);
});
canvas.addEventListener("touchend", function(e) {});

移动端由于是手指操作而非鼠标，所以存在多点触控，即多根手指在屏幕上触发事件。所以，不在跟PC一样，通过e.clientX来获取单个点坐标。而是事件event中存在一个触控集合touches这个数组，通过取数组的第一个元素来获取坐标位置，即第一个触碰屏幕手指的坐标(e.touches[0].pageX , e.touches[0].pageY)。而有时往往有需要获取全部触碰点的位置，那就要循环数组了，逐个处理。另一个坑就是有时要防止多点触碰，以及手指对屏幕进行缩放的影响，可以加入以上判断if(e.touches.length > 1 || e.scale && e.scale != 1)。

最后就是touchend事件，代表手指离开屏幕不存在触控，所以e.touches这个数组的长度为0，也就不能在touchend的处理函数中获取pageX属性了。

 

三、元素内的位置

通过以上方法获取的坐标是以window左上角为原点的坐标，但是在实际中，往往获取的是以某个元素左上角为原点的坐标，这时就需要做个转化。以canvas为例

function windowToCanvas(x, y) { //window坐标转canvas坐标
    return {
        x: Math.round(x - document.getElementById("canvas").getBoundingClientRect().left - document.body.scrollLeft),
        y: Math.round(y - document.getElementById("canvas").getBoundingClientRect().top - document.body.scrollTop)
    }
}

getBoundingClientRect()方法可以获取元素的盒子模型，通过top、left、right、bottom这4个属性可以拿到四周的边距。