鼠标点击dom获取的e的坐标

最新推荐文章于 2022-09-28 20:13:38 发布

Doe

最新推荐文章于 2022-09-28 20:13:38 发布

阅读量408

点赞数

分类专栏： # 一些知识点 # 手撕代码 # ES6学习笔记文章标签： css3 javascript

本文链接：https://blog.csdn.net/weixin_43613849/article/details/123144975

版权

一些知识点同时被 3 个专栏收录

48 篇文章 0 订阅

订阅专栏

ES6学习笔记

38 篇文章 1 订阅

订阅专栏

手撕代码

18 篇文章 2 订阅

订阅专栏

一、clientX、clientY

点击位置距离当前body可视区域的x，y坐标

二、pageX、pageY

对于整个页面来说，包括了被卷去的body部分的长度

三、screenX、screenY

点击位置距离当前电脑屏幕的x，y坐标

四、offsetX、offsetY

相对于带有定位的父盒子的x，y坐标

五、x、y

和screenX、screenY一样

六、面试题：实现页面上拖拽div container的效果

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>


  <script>

    window.onload = function () {
      let divElement = document.getElementsByClassName("container");
      let pushdiv = false;
      let clickPos = {}

      divElement[0].addEventListener("mousedown", (e) => {
        //e.offset +'px';相对于带有定位的父盒子的x，y坐标
        clickPos = {
          x: e.offsetX,
          y: e.offsetY
        }
        pushdiv = true
      })
      divElement[0].addEventListener("mousemove", (e) => {
        //e.page +'px'; 表示距离对于整个页面来说，包括了被卷去的body部分的长度
        if (pushdiv) {
          let curPos = {
            x: e.pageX - clickPos.x,
            y: e.pageY - clickPos.y
          }
          divElement[0].style.left = curPos.x + 'px';
          divElement[0].style.top = curPos.y + 'px';
          console.log(curPos)
          console.log('mousemove')
        }
      })
      divElement[0].addEventListener("mouseup", (e) => {
        console.log('mouseup')
        pushdiv = false;
      })
    }

  </script>

</head>
<style>
  .container {
    border: 3px solid red;
    position: absolute;
    width: 100px;
    height: 100px;
    left: 20px;
    top: 20px;
  }

</style>


<body>
  <div class="container">drag me1</div>
</body>