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. Linux wildcard

    Linux中的通配符: 需要注意的是正则表达式与通配符完全是两个东西.wildcard代表的是bash操作接口的一个功能,而正则表达式是一种字符串处理的方法. 例如,'?',在通配符中表示一个字符,在 ...

  2. angularjs实例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...

  3. spark streaming集成flume

    1. 安装flume flume安装,解压后修改flume_env.sh配置文件,指定java_home即可. cp hdfs jar包到flume lib目录下(否则无法抽取数据到hdfs上): $ ...

  4. windos上安装jenkins部署springboot的jar包（未运行，只是在打包并上传linux成功了）

    流程: 从linux上的svn拉取代码,到本地(windos)jenkins的工作区间的workspace,然后通过构建,打包,部署到linux上 环境: windos上安装:maven jdk je ...

  5. 微信小程序http 400问题

    在v0.14.140900版本的wechat小程序开发工具中做网络请求,直接使用微信的网络请求代码debug过程中发生了400 (Bad request)错误. wx.request({ url: ' ...

  6. soapui调用redis，获取短信验证码

    1.首先,调用redis需要引入redis的jar包,放入到soapui指定目录中,例如我的目录D:\Program Files\SmartBear\SoapUI-Pro-5.1.2\bin\ext ...

  7. Redis入门到高可用（十七）—— 持久化开发运维常见问题

    1.fork操作 2.子进程开销和优化 3.AOF阻塞

  8. python之以字符串形式导入模块

    示例 调用方法 class CorsMiddleware: def process(self): print('from auth.cors.CorsMiddleware.process') cors ...

  9. mysql /tmp目录爆满问题的处理

    mysql /tmp目录爆满问题的处理 突然收到zabbix告警,说mysql服务器的/目录磁盘空间不足. 登录到服务器,看了下发现100GB的根目录,居然使用了差不多90GB.这台服务器上只跑了一个 ...

  10. <c:forEach>详解

    <c:forEach>详解 <c:forEach>标签的语法定义如下所示. <c:forEach var="name" items="exp ...