DOM中Event对象的几个位置坐标属性

该文章由 leevare 发布于 ,归类于 Javascript

本文说说关于坐标位置的几个属性,分别为clientX/Y、pageX/Y、screenX/Y、x/y、offsetX/Y、layerX/Y。这几个属性都可以表示坐标位置,但是又经常弄混,它们分别代表的是什么意思呢?

clientX/clientY与x/y

clientX/Y表示鼠标指针在元素可视区域中的水平和垂直坐标。x/y与clientX/clientY意义相同,但是有兼容性问题。在FireFox中不支持x/y,在IE7以下的浏览器中左上角的起点坐标为(2, 2),但是在其它的浏览器中为(0, 0)

screenX/Y

这个很好理解,表示的是鼠标相对与屏幕的水平坐标和垂直坐标。

pageX/Y与layerX/Y

pageX/Y表示相对于页面的水平和垂直坐标,它与clientX/clientY的区别是不随滚动条的位置变化

layerX/Y与pageX/Y相同

offsetX/Y

offsetX/Y表示相对于定位父级的水平和垂直坐标。

<body>
<style>
  body {
    margin: 20px;
  }
  .box {
    width: 300px;
    height: 300px;
    background-color: seagreen;
  }
</style>
<div class="box"></div>
<script>
  const box = document.querySelector('.box')
  box.onmousemove = function (e) {
    e = e || event

    box.innerHTML = `pageX: ${e.pageX}, pageY: ${e.pageY}<br>
offsetX: ${e.offsetX}, offsetY: ${e.offsetY}`
  }
</script>
</body>

当页面无定位元素时,body是元素的定位父级。由于body的设置了margin20px,所以offsetX/Y与pageX/Y差(20, 20)。可以看到,offsetX/Y与pageX/Y相差的正好是外部元素的margin距离。

如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!

相关文章:

说点什么

avatar
300
  订阅  
提醒