JavaScript事件详解B - 坐标

事件对象常用的属性

当触发某个事件时，会产生一个事件对象，这个对象包含着所有与事件有关的信息。包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息。

通过事件绑定的执行函数是可以得到一个隐藏参数的。说明，浏览器会自动分配一个参数，这个参数其实就是event对象。

Event对象获取方式

1.e.clientX

2.e.clientY

//点击位置距离当前body可视区域的左和上的坐标，不包含滚动条

3.e.pageX

4.e.pageY

//鼠标距离页面左、上的坐标，有滚动条会加上卷起的body的长度

5.e.offsetX

6.e.offsetY

//鼠标位置到事件源距离，这里相当于到div的距离

client和page的区别和效果：

要把div设置一定的高度，出现滚动条才可看出对比效果

运行结果如下：

可以看出page的数值 >= client的数值

offset和上面的区别：

为了方便对比，我们一起显示这三个效果

当我们点击div的左上角时，运行结果如下：

因为我们用手点，可能不是太精准，

但是效果显而易见，offset是到div边的距离

而上面两个是到body浏览器边的距离

鼠标移动显示坐标小案例

运行结果如下：

这里由于软件问题看不到鼠标，当我们移动鼠标时，数值会发生改变

当我们鼠标离开span元素时，数值就会消失

- 写作不易，大家多多关注，谢谢啦-

---web分享，分享的不只是web