zoukankan      html  css  js  c++  java
  • screenX / Y,clientX / Y和pageX / Y之间有什么区别?

    图|网络

    offsetX,offsetY

    IE浏览器特有的事件属性
    鼠标点击的位置相当于事件源元素的位置坐标,以元素盒子模型的内容区域的左上角为参考点

    clientX,clientY

    设置或获取鼠标指针位置相对于浏览器视口(内容区域的左上角)的坐标,与浏览器是否有滚动条无关
    相对于页面的可见部分的左上角,通过浏览器窗口“看到”。
    相对于viewportCSS像素的坐标。

    screenX,screenY

    设置或获取获取鼠标指针位置相对于物理屏幕的左上角的坐标,当改变屏幕的分辨率的时候,坐标会随之改变
    相对于screen设备像素的坐标。

    • 对于这个属性probably never need

    pageX,pageY

    相对于浏览器中完全呈现的内容区域的左上角,此参考点位于左上方的网址栏和后退按钮下方。如果在页面中嵌入可嵌入的可滚动页面,并且用户移动滚动条,则可以实际改变位置。
    坐标相对于整个渲染页面的左上角(包括滚动隐藏的部分)
    相对于<html>CSS像素中元素的坐标。

    • pageX与clientX的区别

    pageY和clientY的差异,图来自网络

    也就是说,当浏览器没有滚动条的时候,pageX和clientX是一样的

    document.addEventListener('click', function(e) {
      console.log(
        'page: ' + e.pageX + ',' + e.pageY,
        'client: ' + e.clientX + ',' + e.clientY,
        'screen: ' + e.screenX + ',' + e.screenY)
    }, false);

    参考资料1
    参考资料2

  • 相关阅读:
    docker基础总结
    python基础学习总结
    静默(命令行)安装oracle 11g
    java中如果函数return可能抛出异常怎么办
    Android 开发先驱的博客列表
    栈与队列
    线性表
    算法
    数据结构概论
    iOS开发中实现手势解锁
  • 原文地址:https://www.cnblogs.com/linewman/p/9918370.html
Copyright © 2011-2022 走看看