关于鼠标位置的获取

关于鼠标位置的获取

---

一、相对屏幕的位置（screen）

<script>
	var x = event.screenX    // window.event.screenX
	var y = event.screenY    // window.event.screenY
</script>

补充：

1. 单位为 px（像素）
2. 获取到的位置是相对显示屏幕左上角的偏移量
3. 当设备连接了多台显示器时，会将所有显示器都计算进去

---

二、相对网页的显示区域的位置（client）

<script>
	var x = event.clientX    // window.event.clientX
	var y = event.clientY    // window.event.clientY
</script>

补充：

1. 相对网页显示区域左上角的偏移量，注意是显示区域

---

三、相对网页的位置（page）

<script>
	var x = event.pageX    // window.event.pageX
	var y = event.pageY    // window.event.pageY
</script>

补充：

1. 是相对整个html页面左上角的偏移量，即包括显示区域和未显示区域
2. 数值上等于client获取的数值+页面滚动的长度

---

四、相对元素的位置（offset）

<script>
	var x = event.offsetX    // window.event.offsetX
	var y = event.offsetY    // window.event.offsetY
</script>

补充：

1. 相对元素的位置，若该位置有多个元素，则以辈分最低的元素的左上角为参考点
2. 参考点取元素左上角，包括content和padding，不包括border和margin，因此当鼠标处在边框上时，会出现负数