关于offsetX、layerX、clientX、screenX以及pageX

简介: 事件(event)的位置区别

【转载请注明出处】:https://blog.csdn.net/huahao1989/article/details/107775411

我们都熟知,标题中的几个方法都是用来获取事件(event)的位置,但是他们有什么区别呢?就用一张图来说明
image.png

  • offsetX: 指事件发生位置相对触发元素左上角的水平坐标
  • layerX: FF特有,鼠标相比较于当前坐标系的位置,即从当前容器依次往上寻找设置绝对定位或相对定位的元素为参考坐标系,以该容器的左上角来计算水平坐标
  • clientX: 是指事件发生位置相对可视区域的水平坐标(只是document展现的部分,不包括搜索栏、书签栏等)
  • screenX: 是指事件发生位置相对电脑屏幕的水平坐标
  • pageX: 是指事件发生位置相对文档(document)的水平坐标(是指整个文档,当出现滚动条时,隐藏的部分也会被算入pageX)
相关文章
|
6月前
|
JavaScript
原生js中offsetTop, offsetLeft与offsetParent的详细讲解
原生js中offsetTop, offsetLeft与offsetParent的详细讲解
|
2月前
|
JavaScript 前端开发
fadeIn
【9月更文挑战第27天】
37 5
|
JavaScript 前端开发
height、clientHeight、scrollHeight、offsetHeight区别
height、clientHeight、scrollHeight、offsetHeight区别
height、clientHeight、scrollHeight、offsetHeight区别
|
JavaScript
clientX和clientY 事件属性的使用
clientX和clientY 事件属性的使用
96 0
|
前端开发
你知道offsetHeight、scrollHeight、clientHeight的区别吗?
前言 offsetHeight、scrollHeight、clientHeight这三个属性我们经常在开发中遇到,如果小伙伴们没有经常使用的话,很容易把这些属性搞混,比如说什么窗口高度、元素高度、内容高度等等。当然,现在的前端框架很多时候帮我们封装了这些属性,但是我们也不能太过依赖框架,底层的原理我们还是需要了解的,今天就来理一理这三个属性分别代表什么?
193 0
你知道offsetHeight、scrollHeight、clientHeight的区别吗?
|
JavaScript 前端开发
你记住JS中offsetWidth、clientWidth、width、scrollWidth、clientX、screenX、offsetX、pageX吗?
你记住JS中offsetWidth、clientWidth、width、scrollWidth、clientX、screenX、offsetX、pageX吗?
clientWidth与clientHeight,offsetWidth与offsetHeight
clientWidth与clientHeight,offsetWidth与offsetHeight
146 0
clientWidth与clientHeight,offsetWidth与offsetHeight
|
API 编解码
clientHeight、offsetHeight、scrollHeight详解
  网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth   (包括边线的宽); 网页可见区域高: document.
1479 0
|
前端开发 数据格式 XML