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. matlab知识

    matlab中cumsum函数通常用于计算一个数组各行的累加值. 调用格式及说明 matlab中cumsum函数通常用于计算一个数组各行的累加值.在matlab的命令窗口中输入doc cumsum或者 ...

  2. Gym 101981J - Prime Game - [数学题][线性筛+分解质因数][2018-2019 ACM-ICPC Asia Nanjing Regional Contest Problem J]

    题目链接:http://codeforces.com/gym/101981/attachments 题意: 令 $mul(l,r) = \prod_{i=l}^{r}a_i$,且 $fac(l,r)$ ...

  3. [ipsec][strongswan] 用strongswan pki工具生成自签名证书

    如题.我在实验环境里,分别要为两个endpoint(T9和T129)生成证书. 证书是如何生成的呢? 证书是由根证书机构签发的.申请证书的人将request提交给根证书机构,然后根证书机构根据requ ...

  4. C#中的一些基础

    值类型与引用类型 值类型包括:[基本数据类型,如int,double,char,bool等][枚举类型enum][结构类型struct] 引用类型包括:[类类型,如基类Object,字符串类Strin ...

  5. android 知识汇总

    1.assets:不会在R.java文件下生成相应的标记,assets文件夹可以自己创建文件夹,必须使用AssetsManager类进行访问,存放到这里的资源在运行打包的时候都会打入程序安装包中, 2 ...

  6. git常用命令--tag

    /// 查看标签 // 打印所有标签 git tag // 打印符合检索条件的标签 git tag -l 1.*.* // 查看对应标签状态 git checkout 1.0.0 /// 创建标签(本 ...

  7. 原生JavaScript写select下拉选择后跳转页面

    <select name="molsel_oprate" onchange="javascript:var obj = event.target; var inde ...

  8. python 对反斜杠的处理问题

    首先,"/"左倾斜是正斜杠,"\"右倾斜是反斜杠,可以记为:除号是正斜杠一般来说对于目录分隔符,Unix和Web用正斜杠/,Windows用反斜杠,但是现在Wi ...

  9. JMeter已传值但是提示为空

    登录时已经传值了,可是一直提示为空 解决:在在请求的url中拼接上参数

  10. rosetta对称性文件(rosetta symmetry file)的产生及应用

    针对对称性PDB 3UKM,使用make_symmdef_file.pl脚本,可以执行产生对称单元及对称文件: $> $ROSETTA3/src/apps/public/symmetry/mak ...