js dom操作 pageX,pageY,offsetX,offsetY,clientX/Y,screenX/Y 介绍使用

2018-09-14 admin

在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果。

方法介绍

js鼠标或坐标属性

  • event.pageX/Y
  • event.offsetX/y
  • event.X/Y
  • event.clientX/Y

clientX/Y

clientX/Y获取到的是触发点相对浏览器可视区域左上角距离,不随页面滚动而改变。

pageX/Y

pageX/Y获取到的是触发点相对文档区域左上角距离,会随着页面滚动而改变

offsetX/Y

offsetX/Y获取到是触发点相对被触发dom的左上角距离,不过左上角基准点在不同浏览器中有区别,其中在IE中以内容区左上角为基准点不包括边框,如果触发点在边框上会返回负值,而chrome中以边框左上角为基准点。

screenX/Y

screenX/Y获取到的是触发点相对显示器屏幕左上角的距离,不随页面滚动而改变。

图解

clipboard.png

函数获取各种坐标方法

  1. 补充一下获取dom的方法

    • 通过ID获取 document.getElementById(elementId)
    • 通过name属性 document.getElementsByName(elementName)
    • 通过标签名 document.getElementsByTagName
    • 通过类名 document.getElementsByClassName
    • 通过选择器获取一个元素document.querySelector(‘类名’)
    • 通过选择器获取一组元素document.querySelectorAll
  2. 获取坐标

    <div class="box">
      <div class="children" id="move"></div>  
    </div>
    var dom = document.getElementById('move');
    function down (e) {
        e = e || window.event;
      console.log(e.pageX, 'pageX')
      console.log(e.offsetX, 'offsetX')
      console.log(e.clientX, 'clientX')
      console.log(e.screenX, 'screenX')
      console.log(e.x, 'e.x')
    }
    dom.onmousedown = down
    

利用鼠标或是键盘做动作

  1. 让div class 为 children 的dom节点往左移

    [链接描述][1]
    
    

原文链接:https://segmentfault.com/a/1190000016389822

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-40209.html

文章标题: js dom操作 pageX,pageY,offsetX,offsetY,clientX/Y,screenX/Y 介绍使用

相关文章
React.js编程思想
JavaScript框架层出不穷,在很多程序员看来,React.js是创建大型、快速的Web应用的最好方式。这一款由Facebook出品的JS框架,无论是在Facebook还是在Instagram中,它的表现都非常出色。 使用React.j...
2015-11-12
YouTube正式默认使用HTML5视频播放器
YouTube视频网站现在默认使用HTML5播放器,这意味着更好的性能、 稳定性、 电池寿命和甚至是更好的安全性。现在用户通过Chrome、IE 11、Safari 8和Beta版本的Firefox进行浏览的时候都默认使用HTML5视频播放...
2015-11-12
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
css布局的各种FC简单介绍:BFC,IFC,GFC,FFC
什么是FC? Formatting Context,格式化上下文,指页面中一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素的相互关系和作用。 BFC 什么是BFC Block Formatting Context,块...
2018-05-17
three.js实现围绕某物体旋转
话不多说,请看代码: 可以拖动右上角观察变化 &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot; style=&quot;width: 100%; height:100%;&quot;&gt...
2017-02-17
NodeJS参考手册pdf版
下载地址:Nodejs参考手册PDF版下载 ...
2015-11-12
Node.js学习(1)----HTTP服务器与客户端
Node.js 标准库提供了 http 模块,其中封装了一个高效的 HTTP 服务器和一个简易的HTTP 客户端。http.Server 是一个基于事件的 HTTP 服务器,它的核心由 Node.js 下层 C++部分实现,而接口由 Jav...
2015-11-12
回到顶部