JavaScript----- 鼠标事件对象

event对象代表事件的状态,跟事件相关的一系列信息的集合

鼠标事件对象 MouseEvent

以下是一些鼠标事件对象;

鼠标事件对象	说明
e.clientX	返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY	返回鼠标相对于浏览器窗口可视区的Y坐标
e.pagex	返回鼠标相对于文档页面的×坐标IE9+支持
e.pageY	返回鼠标相对于文档页面的Y坐标 IE9+支持
e.screenX	返回鼠标相对于电脑屏幕的×坐标
e.screenY	返回鼠标相对于电脑屏幕的Y坐标

1.client

• event.clientX 事件返回当事件被触发时鼠标指针相对于浏览器页面的水平坐标
• event.clientY 事件返回当事件被触发时鼠标指针相对于浏览器页面的垂直坐标

2.page

• event.pageX 属性返回鼠标指针的位置，相对于文档的左边缘
• event.pageY 属性返回鼠标指针的位置，相对于文档的上边缘。

举个栗子:

document.addEventListener('click', function (e) {


//1.client 相对于可视区域的距离

console.log("X轴距离", e.clientX);

console.log("Y轴距离", e.clientY);


//1.page 相对于页面文档的距离

console.log("X轴距离", e.pageX);

console.log("Y轴距离", e.pageY);


//1.screen 相对于电脑屏幕 的距离

console.log("X轴距离", e.screenX);

console.log("Y轴距离", e.screenY);

})

效果如下: