[摘抄]pageX,clientX,offsetX,layerX的那些事

PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化
clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化.

screenX:鼠标在屏幕上的位置,从屏幕左上角开始,这个没有任何争议;

offsetX:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值;

*layerX:FF特有,鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点

/*自己试了下，layerX在FF和chrome,opera上用不了,不知道为什么*/

总结：

offsetX/offsetY：W3C- IE+ Firefox- Opera+ Safari+ chrome+
x/y：W3C- IE+ Firefox- Opera+ Safari+ chrome+
layerX/layerY：W3C- IE- Firefox+ Opera- Safari+ chrome+
pageX/pageY：W3C- IE- Firefox+ Opera+ Safari+ chrome+
clientX/clientY：W3C+ IE+ Firefox+ Opera+ Safari+ chrome+
screenX/screenY：W3C+ IE+ Firefox+ Opera+ Safari+ chrome+

 

PageX只有FF特有,IE没有。

但可以，PageY=clientY+scrollTop-clientTop;(只讨论Y轴,X轴同理,下同)；

页面上的位置=可视区域位置+页面滚动条切去高度-自身border高度,还是直接上图比较清楚；

 

这个是我写pageX的例子：

$(document).mousemove(function(e){
	//console.log(e.pageY)
	if(e.pageX || e.pageY){
		mouseX = e.pageX;
		//console.log(mouseX);
		mouseY = e.pageY;
		//console.log(document.documentElement.scrollLeft+","+document.documentElement.scrollTop)
	}
	else {
		mouseX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
		mouseY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
	}
	
});

 

jq的话，offset和layer的方法可以这样做。可以这样做。

$(*).offset();