zoukankan      html  css  js  c++  java
  • js进阶 12-7 pageY和screenY以及clientY的区别是什么

    js进阶 12-7 pageY和screenY以及clientY的区别是什么

    一、总结

    一句话总结:pageY是距文件,screenY是获取显示器屏幕位置的坐标,clientY是页面视口。

    没有滚动条时,(pageY=clientY)+浏览器菜单栏高度=screenY;

    有滚动条时,pageY>screenY>clientY,

    因为clientY是页面视图距离,有无滚动条时你点屏幕的同一位置不会变化,screenY也是。

    但是pageY会随着滚动条的下拉而变大,因为它是距文件顶端的距离

    1、pageY和screenY以及clientY的区别是什么?

    pageY是距文件,screenY是获取显示器屏幕位置的坐标,clientY是页面视口。

    没有滚动条时,(pageY=clientY)+浏览器菜单栏高度=screenY;

    有滚动条时,pageY>screenY>clientY,

    因为clientY是页面视图距离,有无滚动条时你点屏幕的同一位置不会变化,screenY也是。

    但是pageY会随着滚动条的下拉而变大,因为它是距文件顶端的距离

    2、jquery中用哪个单词表示文档?

    page

    3、jquery中用哪个单词表示屏幕?

    screen

    4、jquery中用哪个单词表示可视区域?

    client

    二、pageY和screenY以及clientY的区别是什么

    1、相关知识

    event.pageX/event.pageY 显示鼠标相对于文件的左侧和顶部边缘的位置

    注意区分:screenX/screenY:获取显示器屏幕位置的坐标;
    clientX/clientY:获取相对于页面视口的坐标

    2、代码

    $(document).mousemove(function(e){
        $('#xy').val('e.pageY:'+e.pageY+' '+'e.screenY:'+e.screenY+'e.clientY:'+e.clientY)
    })
     
  • 相关阅读:
    js每天进步一点点
    优化数据库的方法及SQL语句优化的原则
    实用js代码大全
    【怒转】 idea快捷键说明大全(中英文对照)
    正则表达式手册
    Flink分布式缓存Distributed Cache
    初识Flink广播变量broadcast
    怒转一波,此人整理的Flink特别好
    flink批处理中的source以及sink介绍
    初识Flink-从WorldCount开始
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9273374.html
Copyright © 2011-2022 走看看