javascript获取鼠标坐标pageX和clientX的区别

这两种获取鼠标坐标的方法,区别在于基于的对象不同:

pageX和pageY获取的是鼠标指针距离文档(HTML)的左上角距离,不会随着滚动条滚动而改变;

clientX和clientY获取的是鼠标指针距离可视窗口(不包括上面的地址栏和滑动条)的距离,会随着滚动条滚动而改变;

测试代码:案例中点击红点,滚动条滑动不同距离,查看获取的距离,只有clientY,clientX改变




    
    Title
    


    

测试pageX和clientX的区别 点击红点

红点距离窗口左上角clientX: --, clientY: --
红点距离文档左上角pageX: --, pageY: --

 

 

 

你可能感兴趣的:(javascript)