vue 鼠标坐标_vue 鼠标移动到div 相对位置

1. 方法介绍
   关于js鼠标事件获取到坐标的属性总共以下五种：

    event.clientX/Y
    event.pageX/Y
    event.offsetX/Y
    event.layerX/Y
    event.screenX/Y
1
2
3
4
5

2. clientX/Y
   clientX/Y获取到的是触发点相对浏览器可视区域左上角距离，不随页面滚动而改变。
   兼容性：所有浏览器均支持

3. pageX/Y
   pageX/Y获取到的是触发点相对文档区域左上角距离，会随着页面滚动而改变
   兼容性：除IE6/7/8不支持外，其余浏览器均支持

4. offsetX/Y

   offsetX/Y获取到是触发点相对被触发dom的左上角距离，不过左上角基准点在不同浏览器中有区别，其中在IE中以内容区左上角为基准点不包括边框，如果触发点在边框上会返回负值，而chrome中以边框左上角为基准点。

   兼容性：IE所有版本，chrome，Safari均完美支持，Firefox不支持

5. layerX/Y
   layerX/Y获取到的是触发点相对被触发dom左上角的距离，数值与offsetX/Y相同，这个变量就是firefox用来替代offsetX/Y的，基准点为边框左上角，但是有个条件就是，被触发的dom需要设置为position:relative或者position:absolute，否则会返回相对html文档区域左上角的距离。

   兼容性：IE6/7/8不支持，opera不支持，IE9/10和Chrome、Safari均支持

6. screenX/Y
   screenX/Y获取到的是触发点相对显示器屏幕左上角的距离，不随页面滚动而改变。
   兼容性：所有浏览器均支持

7. 鼠标点击位置坐标

先用一张图来解释，如图所示：

这里我们主要使用screenX/Y、clientX/Y和offsetX/Y这三个
eg：

//相对于屏幕
function getMousePos(event) {
    var e = event || window.event;
    return {'x':e.screenX,'y':screenY}
}
1
2
3
4
5

8. 获取当前元素的坐标

function getMousePos(event) {
    var e = event || window.event;
    var x = e.currentTarget.getBoundingClientRect().x
	var y = e.currentTarget.getBoundingClientRect().y
    return {x,y}
}
1
2
3
4
5
6