1  pagex/pagey:鼠标相对于整个页面的x/y坐标 注:整个页面的意思就是你整个页面的全部 例如:宽200px 高400px 那么pagex/y他们最大值就是它

2,offsetX/y与pageX/Y结果都一样,但是前者只有IE支持后者IE不支持

3,screenx/y 鼠标在屏幕上的坐标,最大值不会超过屏幕分辨率

4,clientX/y 事件发生时鼠标在浏览器内容区域的x/y坐标(不含滚动条),相对于可视区域的坐标 注:滚动的时候看到的区域不算,当你将浏览器窗口缩小时,它们的最大值也会缩小 但最终最大值不会超过浏览器的可视区域

我们在这里就不写代码了,直接画一张图来说明他们几者的关系,来上图

今天就到这里,下次我们写个选项卡,在网站中选项卡也是挺重要的

pagex/y offsetx/y screenx/y clientx/y 用法及区别的更多相关文章

  1. clientX, clientY，offsetX, offsetY,screenX, screenY, x, y

    clientX, clientY是鼠标当前相对于网页的位置,当鼠标位于页面左上角时clientX=0, clientY=0: offsetX, offsetY是鼠标当前相对于网页中的某一区域的位置,当 ...

  2. clientX、pageX、offsetX、screenX的区别

    这几个属性的区别说难不难,可是很容易搞混,很长一段时间没用,发现又忘记区别了,记不清哪个是哪个!真的很抓狂! 区别: clientX.clientY: 相对于浏览器窗口可视区域的X,Y坐标(窗口坐标) ...

  3. pageX/pageY,screenX/screenY,clientX/clientY的差别

    pageX/pageY,screenX/screenY,clientX/clientY的差别 $(document).click(function(e){ //x方向无差别 //alert(e.pag ...

  4. 原生js获取鼠标坐标方法全面讲解：clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y【转】

    关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.sc ...

  5. clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y ,offsetTop,offsetLeft 详解

    clientX/Y: clientX/Y获取到的是触发点相对浏览器可视区域左上角距离,不随页面滚动而改变 兼容性:所有浏览器均支持 pageX/Y: pageX/Y获取到的是触发点相对文档区域左上角距 ...

  6. 原生js获取鼠标坐标方法全面讲解：clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y

    关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.sc ...

  7. clientX/Y pageX/Y offsetX/Y layerX/Y screenX/Y clientHeight innerWidth...

    关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.sc ...

  8. pageX/Y, offset(), position(), scrollTop(), screenX/Y, clientX/Y, pageX/Y

    event.pageX get mouse position Description: The mouse position relative to the left edge of the docu ...

  9. 鼠标事件以及clientX、offsetX、screenX、pageX、x的区别

    鼠标事件 鼠标事件有下面这几种: 1. onclick 鼠标点击事件 box.onclick = function(e){ console.log(e) } 2. onmousedown 鼠标按下事件 ...

随机推荐

  1. Luogu 1583 - 魔法照片 - [简单排序题]

    题目链接:https://www.luogu.org/problemnew/show/P1583 题目描述一共有n(n≤20000)个人(以1--n编号)向佳佳要照片,而佳佳只能把照片给其中的k个人. ...

  2. [No0000195]NoSQL还是SQL？这一篇讲清楚

    随着大数据时代的到来,越来越多的网站.应用系统需要支撑海量数据存储,高并发.高可用.高可扩展性等特性要求. 传统的关系型数据库在应付这些已经显得力不从心,并暴露了许多难以克服的问题. 由此,各种各样的 ...

  3. Python网络编程-Socket简单通信（及python实现远程文件发送）

    学习python中使用python进行网络编程,编写简单的客户端和服务器端进行通信,大部分内容来源于网络教程,这里进行总结供以后查阅. 先介绍下TCP的三次握手: 1,简单的发送消息: 服务器端: i ...

  4. vue.js 之 watch 详解

    接我上篇博客的例子: 在上面代码中,当我们修改 firstName 或 lastName 后,watch 监听每次修改变化的新值,然后计算输出 fullName:此时 watch 的一个缺点是,最初绑 ...

  5. pprint

    pprint = pretty printer 经常用来打印 字典.json 打印出的格式会是较为标准的格式 目的:方便调试,查看中间结果,因为觉得设断点调试相对麻烦. [运行环境:macOS 10. ...

  6. PHP GZ压缩与解压

    /*将字符串添加至GZ文件*/ function gz_str($str,$gz_name){ $fp = gzopen ($gz_name, 'w9'); gzwrite ($fp, $str); ...

  7. osx brew mysql

    MariaDB Server is available for installation on macOS (formerly Mac OS X) via the Homebrew package m ...

  8. 关于UI适配的文档

    第一部分:原理 (1)根据当前屏幕尺寸与开发预设屏幕尺寸尺寸得出以下参数. 1 XRatio:当前屏幕尺寸与开发尺寸的X轴比例 2 YRtaio:当前屏幕尺寸与开发尺寸的Y轴比例 3minRatio: ...

  9. delphi “div”、“mod”、“\”除法运算符的区别与使用方法（附带FORMAT使用方法）

    Delphi中和除法相关的算术运算符有: div.mod和符号“\” 下面分别对他们的作用.操作数类型和返回值类型进行一下介绍: div:对2个整数进行除,取商,操作数需是integer类型,返回值也 ...

  10. MySQL外键约束_ON DELETE CASCADE/ON UPDATE CASCADE

    MySQL通过外键约束实现数据库的参照完整性,外键约束条件可在创建外键时指定,table的存储引擎只能是InnoDB,因为只有这种存储模式才支持外键. 外键约束条件有以下4种: (1)restrict ...