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;
}