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);

复制代码

}

复制代码

[/code]实验
[list][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][/list][code]

复制代码

/* * {

复制代码

margin: 0;

复制代码

padding: 0;

复制代码

} */

复制代码

#box {

复制代码

width: 500px;

复制代码

height: 500px;

复制代码

background: #ddd;

复制代码

}

复制代码

[/code][code]

复制代码

[/code][code]

复制代码

xx = document.getElementById('box')

复制代码

xx.onclick = function(e) {

复制代码

e = e || window.e; //处理兼容性问题

复制代码

console.log('e.pageX:', e.pageX);

复制代码

console.log('e.clientX:', e.clientX);

复制代码

console.log('e.offsetX:', e.offsetX);

复制代码

console.log('e.screenX:', e.screenX);

复制代码

}

复制代码

[/code][code]

复制代码

[code][/code][h1]实验结果[/h1]在谷歌浏览器中的结果，别的浏览器没试

得到以下结论
在谷歌浏览器中，e.clientX和e.pageX鼠标相对于浏览器窗口可视区域的X，Y坐标，可视区域不包括工具栏和滚动条，IE事件和标准事件支持.e.offsetX是相对于文档的定位，文档的左上角为(0,0)，向右为正，向下为正。e.screenX , e.screenY是鼠标相对于屏幕的坐标，包括浏览器上面的工具栏和滚动条。

更多精彩文章

js进阶之函数与对象

原生js实现打飞机和静态留言表

js+Canvas实现热力图

js+Canvas实现时钟图，简单易懂

js+vue实现轮播图，大致功能实现

Vue2.0搭建Vue脚手架及ECharts入门，VUE组件中传值实例

玩转github（一）

更多前端资料请关注公众号:前端从入门到SP

扫描二维码关注公众号