在我们触发事件的时候会有event对象，该对象是我们触发事件时的一些信息。
其中包括了鼠标坐标的一些信息。

  1. oDiv.onclick = function(event){
  2.   console.log(event);
  3. }

clientX/clientY

:::info 该属性是鼠标位置相对于当前可视页面的坐标（不计算滚动条的距离）。 :::

  1. document.onclick = function(event){
  2.   console.log(event.clientX, event.clientY);
  3. }

Xnip2022-06-02_16-08-11.jpg
另外还有x、y两个属性，和clientX/clientY属性同义，但是老版的火狐浏览器不支持！！！

pageX/pageY

:::info 该属性是鼠标位置相对于当前文档的坐标（会计算滚动条的距离，这是和clinetX/clientY的区别）。
❌ IE9及以下不支持 :::

  1. document.onclick = function(event){
  2.   console.log(event.pageX, event.pageY);
  3. }

Xnip2022-06-02_16-15-50.jpg
另外还有layerX/layerY两个属性，和pageX/pageY属性同义，但是IE11及以下不支持。

📌 兼容性写法：

  1. function pagePos(e){
  2.   var sLeft = document.body.scrollTop || document.documentElement.scrollTop,
  3.       sTop = document.body.scrollTop || document.documentElement.scrollLeft;
  4.   var cLeft = docuemnt.documentElement.clientLeft,
  5.       cTop = docuemnt.documentElement.clientTop;
  7.   return {
  8.     X: e.clientX + sLeft - cLeft,
  9.     Y: e.clientY + sTop - cTop
  10.   }
  11. }

screenX/screenY

:::info 改属性是鼠标位置相对于屏幕的坐标。 :::

  1. document.onclick = function(event){
  2.   console.log(event.screenY, event.screenX);
  3. }

Xnip2022-06-02_16-21-33.jpg

offsetX/offsetY

:::info 该属性是鼠标相对块元素内部的坐标。 :::

  1. // oDiv 是获取到的 div
  2. oDiv.onclick = function(event){
  3.   console.log(event.offsetX, event.offsetY);
  4. }

Xnip2022-06-02_16-30-56.jpg


编写鼠标拖动元素

先认识三个事件：

  • mousedown鼠标按键按下事件
  • mouseup鼠标按键抬起事件
  • mousemove鼠标移动事件
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.   <title>Document</title>
    8.   <style>
    9.     .box {
    10.       position: absolute;
    11.       top: 0;
    12.       left: 0;
    13.       width: 100px;
    14.       height: 100px;
    15.       background-color: orange;
    16.     }
    17.   </style>
    18. </head>
    19. <body>
    20.   <div class="box">
    21.   </div>
    22. </body>
    23. </html>
    ```javascript var oDiv = document.getElementsByClassName(“box”)[0];

oDiv.onmousedown = function (event) { // div 被点击的时候记录鼠标距离 div 边的距离 var offsetPos = { X: event.offsetX, Y: event.offsetY, };

document.onmousemove = function (event) { var pagePos = { X: event.pageX, Y: event.pageY, };

  1. // 为了让 div 的距离是我们点击 div 距离，所以需要用 pageX - offsetX
  2. // 否则当我们点击 div 的时候，div 的左上角会跑到我们的鼠标下
  3. oDiv.style.left = pagePos.X - offsetPos.X + "px";
  4. oDiv.style.top = pagePos.Y - offsetPos.Y + "px";

}; oDiv.onmouseup = function () { document.onmousemove = null; }; }; ``` 屏幕录制2022-06-02 下午4.33.382022-06-02_16-34-32.gif