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. 关于vue执行打包后，如何在本地浏览问题

    最近一个人在捣鼓vue,写完项目后发现在npm run dev下可以正常访问,bulid之后却一片空白,查看console出现许多Failed to load resource: net::ERR_F ...

  2. Windows 10 家庭版/专业版 彻底关闭windows update自动更新

    转载: https://blog.csdn.net/u014162133/article/details/84973426# https://blog.csdn.net/qq_40820862/art ...

  3. FastJson一些常见方法(API)：处理JSON变得好简单

    fastjson是目前java语言中最快的json库,比自称最快的jackson速度要快,第三方独立测试结果说明比gson快大约6倍 JSON帮助类 这个可以做一个实例研究代码,也可以作为一个工具类 ...

  4. #学号 20175201张驰 《Java程序设计》第1周学习总结

    教材学习内容总结 第一章 ·第一章的内容相对简单,我并未遇到大的困难. ·1.Java特点:语法简单.面向对象.与平台无关.动态. ·2.关于编写源文件:源文件名字必须与public类的名字相同:保存 ...

  5. [LeetCode] 90.Subsets II tag: backtracking

    Given a collection of integers that might contain duplicates, nums, return all possible subsets (the ...

  6. Lambda表达式详解（例子详解）（转自：http://blog.csdn.net/damon316/article/details/51734661）

    Lambda表达式详解(例子详解)     lambda简介 lambda运算符:所有的lambda表达式都是用新的lambda运算符 " => ",可以叫他,“转到”或者 ...

  7. Android -- 贝塞尔曲线公式的推导和简单使用

    1,最近看了几个不错的自定义view,发现里面都会涉及到贝塞尔曲线知识,深刻的了解到贝塞尔曲线是进阶自定义view的一座大山,so,今天先和大家来了解了解. 2,贝塞尔曲线作用十分广泛,简单举几个的栗 ...

  8. crontab定时

    yum install -y vixie-cron --安装定时服务 每分钟更新一次商品crontab -e* * * * * /usr/bin/curl http://test.wadao.com/ ...

  9. NOIP2015跳石头

    题目描述 Description 一年一度的“跳石头”比赛又要开始了! 这项比赛将在一条笔直的河道中进行,河道中分布着一些巨大岩石.组委会已经选择好了两块岩石作为比赛起点和终点.在起点和终点之间,有N ...

  10. [转][访谈] Olivier Grisel谈scikit-learn和机器学习技术的未来

    原文:http://www.csdn.net/article/2015-10-11/2825882 几周前,我们的Florian Douetteau (FD)对Olivier Grisel(OG)进行 ...