JavaScript中几种获取鼠标点击坐标位置的方法

转载请注明地址：http://blog.csdn.net/qq_27278957/article/details/52937488

最近在做Canvas画图的功能，发现Canvas在不同的设备上、不同的相对位置，获取的点击鼠标位置不一样，所以查找资料找了如下几种方法：

1：获取鼠标在canvas上的点击位置

canvas.onmousedown = function(evt) {
evt = window.event || evt;
//获取canvas相对于浏览器圆点的坐标
var rect = canvas.getBoundingClientRect();
//获取圆心的位置
//获取鼠标在canvas上的位置
arcX = (evt.pageX - rect.left) * (canvas.width / rect.width);
arcY = (evt.pageY - rect.top) * (canvas.height / rect.height);
}

2：获取鼠标相对于屏幕的点击位置

screenX、screenY分别表示获取的是点击位置相对于屏幕的左边距与上边距，不考虑iframe因素，不同的浏览器表现出来的还算一致

canvas.onmousedown = function(evt) {
evt = window.event || evt;
//获取圆心的位置
//获取鼠标相对于屏幕的位置
arcX = evt.screenX;
arcY = evt.screenY;
}

3：获取鼠标相对于浏览器窗口的点击位置

clientX、clientY分别表示获取的是点击位置相对于浏览器窗口的左边距与上边距

canvas.onmousedown = function(evt) {
evt = window.event || evt;
//获取圆心的位置
//获取鼠标相对于浏览器窗口的位置
arcX = evt.clientX;
arcY = evt.clientY;
}

4：获取鼠标相对于文档的点击位置

clientX、clientY忽略了页面滚动因素，如果考虑页面滚动，也就是相对于文档（body元素）的坐标，加上滚动的位移就可以了。

Firefox下支持pageX、pageY属性，这两个属性已经把页面滚动包括在内了， chrome下 通过document.body.scrollLeft和document.body.scrollTop来计算页面滚动位移，IE下通过document.documentElement.scrollLeft和document.documentElement.scrollTop来计算页面滚动位移。

canvas.onmousedown = function(evt) {
evt = window.event || evt;
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
//获取圆心的位置
//获取鼠标相对于文档的位置
arcX = evt.pageX || evt.clientX+scrollX;
arcY = evt.pageY || evt.clientY+scrollY;
}