层级元素含有position属性时鼠标坐标位置解决方案

在上一篇文章中《利用CSS sprites制作随着鼠标移动的动画背景》我们是用mousemove事件来实现我们的鼠标坐标定位判断的。mousemove这个鼠标函数，常常会用到我们的项目中，是个很好用的函数。根据在上一篇文章制作实例的时候遇到的一些问题，作个总结出来，一来分享给大家，二来可以给自己加深印象。相信熟悉javascript的朋友对鼠标坐标函数比较了解的，网上的资料也很多，就不多说了。先看看一段代码：

jQuery(document).ready(function(){
   $('#demos').mousemove(function(e){
	   var relX = e.pageX - this.offsetLeft
	   var relY = e.pageY - this.offsetTop
       $('#demos').html(relX + '， ' + relY);

   });

这段代码表示的是，鼠标在#demos对象中的相对坐标值，也就是以这个对象为基准（范围），计算鼠标在对象内（对象的左上方的顶角坐标为：0，0）的坐标值。我们继续看看具体的代码含义，e.pageX、e.pageY这两个表示了鼠标在页面上的位置；offsetLeftoffsetTop分别表示的是返回对象相对于父级对象的布局或坐标的left值和top值。明白了这几个代码含义，上面的示例代码最终输出值也不难理解。

在这里附上一张关于盒模型的各种计算值含义详解图：

层级元素含有position属性

在这里我们要重点说下offsetLeft的计算方法，上面也说到是对象相对于父级对象的布局或坐标的left值，那么父级对象将是影响最终值的关键。一般情况下，都没什么问题，但如果父级对象出现了position属性，并且定义了margin值，那么计算结果将会不如我们所意。这是个特殊情况，在这时我们需要适当的修改上面的示例代码，具体如下：

jQuery(document).ready(function(){
   $('#demos').mousemove(function(e){
	   var parentOffset = $(this).parent().offset(); 
	   var relX = e.pageX - parentOffset.left;
	   var relY = e.pageY - parentOffset.top;
       $('#demos').html(relX + '， ' + relY);

   }); 
})

总结到此结束，解决方案折腾了好久……好好学习，天天向上。Good luck！