javascript的一些坐标位置属性2

screenX:鼠标在显示屏幕上的坐标。

clientX:鼠标在页面显示区域的坐标。

注：以上两个都是各浏览器通用的。

pageX:FF特有，鼠标在页面上的位置，从页面左上角开始定位，这个可以很方便在整个页面上进行定位，IE没有直接替换的属性。

layerX:FF特有，鼠标相对于“触发事件的元素的层级关系中离该元素最近的，设置了position的父元素”的边界的位置，从border的左上角开始定位，即如果这个父元素存在border，则坐标原点在border的左上角，而不是内容区域的左上角。

offsetX:IE特有，鼠标相对于“触发事件的元素”的位置，从内容区域左上角开始定位，不是从border左上角开始！这个属性比较好用，用来判断鼠标点在一个元素中的哪个位置很方便，FF没有直接替换的属性。

x：IE特有，跟layerX一个效果，可作为layerX的直接替换属性。

注：IE和FF的定位有个1px的差别，实际上，IE的定位从0开始，FF的定位从1开始，FF永远会比IE大1px，需要根据实际情况处理。

offsetLeft:这个属性不是事件对象的属性，而是DOM对象所有的，该属性表示的是DOM对象在“该DOM对象的层级关系中离该对象最近的，设置了position的父对象”中的位置，虽然话是这么说的，但是不同的浏览器效果不一样，FF中严格按上述说明执行，但是在IE6/7中，这个属性返回该DOM对象在其直接父对象中的位置，但是IE8改正了这个问题，不过IE8又有了一个新问题，其他的浏览器都是从父对象的内容区域的左上角开始定位，IE8确是从父元素的border的左上角开始定位，由于测试环境为IETester中的IE8，不能排除是IETester的问题。

评论

3 楼 lddzmy 2009-09-11  

还需要说明一点，对于二、e.x,y中的情况三，此时x,y的(0,0)点是在浏览器窗口的左上角，而不是document的左上角，它不会因滚动条的改变而改变。这一点与layerX,Y 的(0,0)点始终在document的左上角是不同的，layerX,Y的坐标会随着滚动条的滚动变化。

2 楼 lddzmy 2009-09-11  

:cry: 唉，是我理解错了。我做了一组测试，发现了如下的规律。
一、先说e.layerX,Y
    情况1：如果该元素本身就有position属性，无论父级有没有position属性，那么layerX,Y 的(0,0)点就是该元素的左上角。
    情况2：如果该元素本身没有position属性，但是该元素的父级元素中有position属性，那么layerX,Y 的(0,0)点就是该父级元素的左上角。
    情况3：无论元素本身还是父级元素都没有position，那么layerX,Y 的(0,0)点就是document的左上角。
二、e.x,y 这个也对应三种情况，不同的是元素或者元素的父级不仅要有position属性而且还得是relative的
    情况1：如果该元素本身就有position:relative属性，无论父级有没有position:relative属性，那么x,y的(0,0)点就是该元素的左上角。
    情况2：如果该元素本身没有position:relative属性，但是该元素的父级元素中有position:relative属性，那么x,y 的(0,0)点就是该父级元素的左上角。
    情况3：无论元素本身还是父级元素都没有position:relative，那么x,y的(0,0)点就是document的左上角。
三、offsetX,Y 不分情况！

1 楼 lddzmy 2009-09-11  

我怎么感觉layerX和offsetX是一个效果呢。