Javascript中clientX、offsetX和screenX的区别

阅读() @2018-10-29 18:16:05

概念解释:

clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。 

clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条。 

offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 

offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。 

offsetWidth获取当前对象的宽度。

offsetHeigh获取当前独享的高度。

screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。

screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。

innerWidth获取当前浏览器窗口的宽度。

innerHeight获取当前浏览器窗口的高度。

x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标(亦即相对于当前窗口)。

y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标(亦即相对于当前窗口)。

测试代码如下:

document.getElementsByClassName("box")[0].onclick = function(ev){
	var ev = ev || window.event;
	alert(ev.clientX);
	alert(ev.offsetX);
	alert(ev.screenX);
        alert(window.innerWidth);
}
微信二维码