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

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

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

案例代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        div.container {

            position: relative;

            height: 20px;

            width: 400px;

            border-radius: 20px;

            margin: 100px auto;

            background-color: red;

        }

        div.scrollbar {

            position: absolute;

            height: 40px;

            left: -20px;

            top: -10px;

            width: 40px;

            border-radius: 50%;

            background-color: green;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="scrollbar"></div>

    </div>

    <script>

        var container = document.querySelector('.container');

        var scrollbar = document.querySelector('.scrollbar');

        // 计算容器的offsetLeft

        var _left = container.offsetLeft;

        // 边界判断

        var leftMin = -scrollbar.clientWidth / 2;

        var leftMax = container.clientWidth - scrollbar.clientWidth / 2;

        scrollbar.onmousedown = function () {

            document.onmousemove = function (e) {

                // 得到鼠标想对于容器container的左侧坐标

                var left = e.clientX - _left;

                left = Math.min(Math.max(leftMin, left), leftMax);

                scrollbar.style.left = left + 'px';

            }

            document.onmouseup = function () {

                this.onmousemove = null;

            }

        }

    </script>

</body>

</html>

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

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

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

   var getPage = function (e) {

            var clientx = e.clientX;

            var clienty = e.clientY;

            var pagex = e.pageX;

            var pagey = e.pageY;

            if (!pagex) {

                pagex = clientx + (document.documentElement.scrollLeft || document.body.scrollLeft);

            }

            if (!pagey) {

                pagey = clienty + (document.documentElement.scrollTop || document.body.scrollTop);

            }

            return {

                pageX: pagex,

                pageY: pagey

            }

        }

        var div = document.querySelector('.myDiv');

        div.onclick = function (e) {

            getPage(e);

        }

三. 屏幕坐标位置

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

看一段代码：

  var div = document.querySelector('.myDiv');

        div.onclick = function (e) {

            console.log(e.screenX);

            console.log(e.screenY);

        }

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

一文看懂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. js几个常用的弹层

    js弹层技术很常见,自己每次用上网找,一找一大堆. 对比了几种,考虑通用性和易用性,这里记录两个. jQueryUI的http://jqueryui.com/dialog/#modal-form ar ...

  2. 使用okhttp连接网络，再把数据储存进Sqlite

    这次会把所有之前学过的东西应用在一起,写一个登入的功能. 1. Activity调用CONFIG,获得URL后 2. Activity再调用Okhttp,从服务器返回JSON 3. Activity调 ...

  3. 53）PHP，类的继承

    详见   视频第十七天  中的第二节 类的继承 所以   类之间的继承就是一种新的关系的建立,并不是将父类的东西重新复制给子类--------------------- 当你实例化一个类的时候,调用它 ...

  4. 吴裕雄--天生自然 JAVA开发学习：MySQL 连接

    CREATE TABLE `websites` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` char(20) NOT NULL DEFAULT '' ...

  5. c# winForm 将窗体状态栏StatusStrip 分成左中右三部分 右边显示当前时间

    实现效果:通过StatusStrip显示窗体状态栏同时将状态栏分成三部分居左边显示相关文字信息中间空白显示居右边显示时间信息 1.创建窗体及添加StatusStrip  默认StatusStrip名称 ...

  6. 系统学习Javaweb9----BootStrap1

    学习内容: 1.BootStrap的简述 2.BootStrap环境搭建 3.BootStrap环境搭建-基本模板创建 4.BootStrap环境搭建-基本模板讲解 5.BootStrap布局容器 6 ...

  7. vue2.0学习之路由

    下载vue-router: cnpm install vue-router --save router/main.js /*引入所需要的组件*/ import VueRouter from 'vue- ...

  8. 《运筹学基础及应用》习题1.3(b)

    习题1.3(b):分别用图解法和单纯形法求解下述线性规划问题,并对照指出单纯形表中的各基可行解分别对应图解法中可行域的哪一顶点.$\max z=2x_1+x_2$,$$s.t.\begin{cases ...

  9. Serializable中的serialVersionUID是必须的吗

    不写serialVersionUID就没有吗 即使不写, jdk反序列化时也会自动检查这个id, 反编译.class文件你也看不到这个值 rpc反序列化 如果使用jdk的方式, 这个必须配置 如果使用 ...

  10. 自主知识产权受热捧 瑞星ESM SOHO版全力护卫小微企业

    小微企业现在可以说是我国国民经济中最重要的组成部分,在总产值.利税.解决就业等方面,都在为国家积极贡献着自己的力量.但在小微企业一片欣欣向荣的背后,却有着难言之隐--那就是困扰着广大小微企业多年的企业 ...