JS——clientX/Y、screenX/Y、pageX/Y、layerX/Y、offsetX/Y的区别

这些都是什么呢？

先来用文字来简单介绍一下：（下面的所有都是以参照物的左上角为原点）

clientX/Y：鼠标触发点相对浏览器可视区域的X、Y坐标。当然其中不包括工具栏和滚动栏。
所有浏览器均支持。

screenX/Y：鼠标触发点相对于显示器的X、Y坐标
所有浏览器均支持

pageX/Y：鼠标触发点相对于当前整个网址页面的X、Y坐标
所有浏览器均支持

layerX/Y：鼠标触发点相对于被触发元素的左上角的距离。值和offsetX/Y是相同的。因为这个变量就是firefox来代替offsetX/Y的。但是要求其元素的postion为retative或者absolute。否则返回相对html文档区域左上角距离
ie6/7/8、opera不支持。ie9/10、chrome、sofari、firefox均支持。

offsetX/Y：鼠标触发点相对于被触发元素的左上角的距离。一般左上角基准点不包括边框，在边框上会返回负值。
这个只有firefox不支持。

形象的图形展示

其中layer和offset的区别主要是：layer的距离包括边框，也就是说是包括盒子模型的border再内，而offset是到边框的距离，不包括border的宽度。