一. 客户区坐标位置（clientX，clientY）

鼠标事件都是在浏览器视口中的特定位置发生的。这个位置信息保存在事件对象的clientX和clientY属性中，所有浏览器都支持这两个属性。

我们知道了这个位置信息我们可以做些什么了？举个例子，有时候我们需要获取鼠标在某一个元素中的相对位置，做一些事情，比如自定义拖动条。

案例代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.  
  14.         div.container {
  15.             position: relative;
  16.             height: 20px;
  17.             width: 400px;
  18.             border-radius: 20px;
  19.             margin: 100px auto;
  20.             background-color: red;
  21.         }
  22.  
  23.         div.scrollbar {
  24.             position: absolute;
  25.             height: 40px;
  26.             left: -20px;
  27.             top: -10px;
  28.             width: 40px;
  29.             border-radius: 50%;
  30.             background-color: green;
  31.         }
  32.     </style>
  33. </head>
  34.  
  35. <body>
  36.     <div class="container">
  37.         <div class="scrollbar"></div>
  38.     </div>
  39.     <script>
  40.         var container = document.querySelector('.container');
  41.         var scrollbar = document.querySelector('.scrollbar');
  42.         // 计算容器的offsetLeft
  43.         var _left = container.offsetLeft;
  44.         // 边界判断
  45.         var leftMin = -scrollbar.clientWidth / 2;
  46.         var leftMax = container.clientWidth - scrollbar.clientWidth / 2;
  47.         scrollbar.onmousedown = function () {
  48.             document.onmousemove = function (e) {
  49.                 // 得到鼠标想对于容器container的左侧坐标
  50.                 var left = e.clientX - _left;
  51.                 left = Math.min(Math.max(leftMin, left), leftMax);
  52.                 scrollbar.style.left = left + 'px';
  53.             }
  54.             document.onmouseup = function () {
  55.                 this.onmousemove = null;
  56.             }
  57.         }
  58.     </script>
  59. </body>
  60.  
  61. </html>

像这样子就实现了一个简易的拖动条（还需要优化，但是思路就是上面展现的思路）。

二. 页面坐标位置（pageX，pageY）

pageX和pageY两个属性代表鼠标光标在页面中的位置，因此坐标是从页面本身而非视口的左边和顶边计算的。在没有滚动的情况下，clientX和cilentY与pageX和pageY是相等的。在IE8及更早版本中是没有这个两个属性的，但是我们可以根据滚动信息和客户区坐标位置信息计算出来，下面给出兼容写法：

  1.    var getPage = function (e) {
  2.             var clientx = e.clientX;
  3.             var clienty = e.clientY;
  4.             var pagex = e.pageX;
  5.             var pagey = e.pageY;
  6.             if (!pagex) {
  7.                 pagex = clientx + (document.documentElement.scrollLeft || document.body.scrollLeft);
  8.             }
  9.             if (!pagey) {
  10.                 pagey = clienty + (document.documentElement.scrollTop || document.body.scrollTop);
  11.             }
  12.             return {
  13.                 pageX: pagex,
  14.                 pageY: pagey
  15.             }
  16.         }
  17.         var div = document.querySelector('.myDiv');
  18.         div.onclick = function (e) {
  19.             getPage(e);
  20.         }

三. 屏幕坐标位置

鼠标事件发生的时候，不仅仅会有相对于浏览器的窗口，还有一个相对于整个电脑屏幕的位置。通过事件对象中的screenX和screenY属性就可以获得相关的属性信息。

看一段代码：

  1.   var div = document.querySelector('.myDiv');
  2.         div.onclick = function (e) {
  3.             console.log(e.screenX);
  4.             console.log(e.screenY);
  5.         }

这样就获取了相对于电脑屏幕的位置信息。

一文看懂js中的clientX，clientY，pageX，pageY，screenX，screenY的更多相关文章

  1. 一文看懂js中元素的滚动大小（scrollWidth,scrollHeight,scrollTop,scrollLeft）

    滚动大小(scroll dimension) 滚动大小指的是包含滚动内容元素的大小. 以下是与元素滚动内容大小相关的属性: 1. scrollWidth:在没有滚动条的情况下,元素内容的总宽度. 2. ...

  2. 一文看懂js中元素的客户区大小（clientWidth,clientHeight）

    元素的客户区 元素的客户区大小,指的是元素内容及其内边距所占据的空间大小. 相关属性如下: 1. clientWidth:元素内容区宽度+元素左右内边距 2. clientHeight:元素内容区高度 ...

  3. 一文看懂js中元素偏移量（offsetLeft,offsetTop,offsetWidth,offsetHeight）

    偏移量(offset dimension) 偏移量:包括元素在屏幕上占用的所有可见空间,元素的可见大小有其高度,宽度决定,包括所有内边距,滚动条和边框大小(注意,不包括外边距). 以下4个属性可以获取 ...

  4. 一文搞懂 js 中的各种 for 循环的不同之处

    一文搞懂 js 中的各种 for 循环的不同之处 See the Pen for...in vs for...of by xgqfrms (@xgqfrms) on CodePen. for &quo ...

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

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

  6. 一文看懂JS继承

    继承是OOP中大家最喜欢谈论的内容之一,一般来说,继承都两种方式:接口继承和实现继承而JavaScript中没有接口继承需要的方法,因此只能依靠实现继承.在讲继承的实现之前,我们首先来回顾一下什么是继 ...

  7. 元素位置pageX,pageY,clientX,clientY,scrollX,scrollY,screenX,screenY,offsetX,offsetY

    总结: event.clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. (可见区域)event.clientY 设置或获取鼠标指针位置相对于当 ...

  8. 一文读懂JS中的原型和原型链（图解）

    讲原型的时候,我们应该先要记住以下几个要点,这几个要点是理解原型的关键: 1.所有的引用类型(数组.函数.对象)可以自由扩展属性(除null以外). 2.所有的引用类型都有一个’_ _ proto_ ...

  9. 一文搞懂js中的typeof用法

    基础 typeof 运算符是 javascript 的基础知识点,尽管它存在一定的局限性(见下文),但在前端js的实际编码过程中,仍然是使用比较多的类型判断方式. 因此,掌握该运算符的特点,对于写出好 ...

随机推荐

  1. 新年在家学java之基础篇-参数&修饰符&构造器

    可变参数 不知道可能给方法传递多少个参数时使用这个方法 public void printInfo (String[] args) --可以定义一个数组,在调用这个方法适合赋值给一个数组 public ...

  2. 十八、linux系统分区

    一.磁盘存储结构图:这里注意下,分区标有64字节,则每个分区有16字节,MBR引导分区有446字节,共有510字节,一个扇区有512字节,还有俩个字节是分区结束标识.比如隐藏文件等标识,都是这2个字节 ...

  3. linux下java调用C

    linux下java调用C 分类: linux2012-05-22 09:12 1529人阅读 评论(0) 收藏 举报 javalinuxmakefilegccclasscommand 下面是在ubu ...

  4. 简单Arp欺骗

    title date layout tags 简单arp欺骗 2018-05-08 post Python #-*- coding:utf-8 -*- from scapy.all import Et ...

  5. 吴裕雄--天生自然 R语言开发学习：基础知识

    1.基础数据结构 1.1 向量 # 创建向量a a <- c(1,2,3) print(a) 1.2 矩阵 #创建矩阵 mymat <- matrix(c(1:10), nrow=2, n ...

  6. UFT检查点

    一.标准检查点 选择需要插入检查点的语句,点击右键,选择Insert Standard Checkpoint.... 二.图像检查点(Insert Standard Checkpoint....) 在 ...

  7. Springmvc+Mybatis+shiro整合

    Apache Shiro是一个强大且易用的Java安全框架,执行身份验证.授权.密码学和会话管理.使用Shiro的易于理解的API,您可以快速.轻松地获得任何应用程序,从最小的移动应用程序到最大的网络 ...

  8. python语法基础-面向对象-进阶-长期维护

    ###############    @property定义属性    ############## # 所以对于定义属性你有好几种方式了和种类了,# 静态属性,动态属性, # property # ...

  9. 限制IP每分钟访问10次

    转载:https://www.jianshu.com/p/d1326ab657ff IP请求限制,之前用过redis的set设置时间戳一分钟过期:也用过nginx的IP限流配置.前者,没法解决“用户在 ...

  10. 在virtualenv中安装NumPy、 SciPy、 scikit-learn、 matplotlib

    首先要进入对应的虚拟环境 然后安装包    这里把安装源改成使用豆瓣的源进行下载  这样的话 下载速度会快很多   安装numpy包 pip install numpy -i https://pypi ...