js之获取鼠标在浏览器的位置及e.clientX,e.pageX,,e.offsetX,e.screenX区别

在浏览器中有时候需要在响应鼠标的click，move，doubleclick等事件的同时，还需要去综合鼠标所在的位置，去考虑一些问题，首先我们要理解一些概念

事件对象

当事件的响应函数被触发时，浏览器都会将一个事件对象作为实参传递给响应函数
在事件对象封装了当前事件的一切信息，比如鼠标坐标，是否被按下，键盘是否按下等
比如这就是一个响应函数

xx = document.getElementById(n)
xx.onclick = function(e){
    e = e || window.e; //处理兼容性问题
    consolo.log(e.page.x);
    }

实验

实验

在谷歌浏览器中的结果，别的浏览器没试

得到以下结论

在谷歌浏览器中，e.clientX和e.pageX鼠标相对于浏览器窗口可视区域的X，Y坐标，可视区域不包括工具栏和滚动条，IE事件和标准事件支持.e.offsetX是相对于文档的定位，文档的左上角为(0,0)，向右为正，向下为正。e.screenX , e.screenY是鼠标相对于屏幕的坐标，包括浏览器上面的工具栏和滚动条。
更多前端资料请关注微信公众号：前端从入门到SP
扫描二维码关注公众号