关于鼠标位置的获取
一、相对屏幕的位置(screen)
<script>
var x = event.screenX // window.event.screenX
var y = event.screenY // window.event.screenY
</script>
补充:
- 单位为 px(像素)
- 获取到的位置是相对显示屏幕左上角的偏移量
- 当设备连接了多台显示器时,会将所有显示器都计算进去
二、相对网页的显示区域的位置(client)
<script>
var x = event.clientX // window.event.clientX
var y = event.clientY // window.event.clientY
</script>
补充:
- 相对网页显示区域左上角的偏移量,注意是显示区域
三、相对网页的位置(page)
<script>
var x = event.pageX // window.event.pageX
var y = event.pageY // window.event.pageY
</script>
补充:
- 是相对整个html页面左上角的偏移量,即包括显示区域和未显示区域
- 数值上等于client获取的数值+页面滚动的长度
四、相对元素的位置(offset)
<script>
var x = event.offsetX // window.event.offsetX
var y = event.offsetY // window.event.offsetY
</script>
补充:
- 相对元素的位置,若该位置有多个元素,则以辈分最低的元素的左上角为参考点
- 参考点取元素左上角,包括content和padding,不包括border和margin,因此当鼠标处在边框上时,会出现负数