event.clientX、clientY、x、y、offsetX、offsetY、screenX、screenY的区别

    技术2022-05-11  23

    某次运行的结果如下图所示,鼠标的位置基本位于图中蓝色框的左上角:

    从图中可见:

    clientX与clientY、x与y:鼠标相对于浏览器内容窗口左上角的偏移量。

    offsetX与offsetY:在蓝色框内,鼠标相对于蓝色框左上角的偏移量。若移出蓝色框,则是与上面的值接近的数据。(?为什么不是相等?少了2px)。

    screenX与screenY:鼠标相对于显示器左上角的偏移量,也许屏幕上同时打开的有其它的应用程序。 

    但是x与clientX有何区别?还不清楚。

    scrollLeft:当网页宽度超出屏幕宽度,并向右滚动了部分网页时,该值表示网页左边被卷去的宽度。

    scrollTop:同上,网页上部被卷去的高度。

    所以,若网页有被滚动(有滚动条且进行了滚动),则此时鼠标的坐标应为:

    x=event.clientX+document.body.scrollLeft;

    y=event.clientY+document.body.scrollTop;


    最新回复(0)