ClientX、ScreenX、OffsetX

最近真的是没有看不少的东西，忙着迭代和公司舞蹈的排练，已经让我心力交瘁了。最近写位置比较多， 借机总结一波 ~ 🤠

那么今天很通俗的讲：

如今鼠标停在红色长方体处

ClientX ClientY  相对于浏览器可视区域坐标
  黑色部分便是浏览器但是区域    蓝色线便是坐标相对的位置
ScreenX ScreenY  相对于屏幕坐标   
  很简单 相对于你显示器的左上角
OffsetX OffsetY  相对于父节点的偏移坐标
  取个父节点吧， 鼠标的的偏移便是相对于父元素
复制代码

代码

到如今若是还没懂那就动手试验下吧：

html

<span style="white-space:pre"></span>
  <div id="div" class="container"></div>
  <span style="white-space:pre"></span>
  <div id="div1" class="container"></div>
  <span style="white-space:pre">	
  </span><input type="button" value="test" οnclick="test()" />  
复制代码

css

*{padding: 0;margin: 0;}
    .container{
        width: 200px;height: 100px;
        border: 1px solid #c00;
    }
    input[type="button"]{
        margin: 50px;
        border: none;
        width: 100px;height: 50px;background: green;
    }
    #one {
      /* background: red; */
      width:200px;
      height:200px;
      padding:10px;
      border:5px solid lightgreen;
      margin:20px;
      background:lightskyblue;
    }
复制代码

js

document.onmousemove = function (ev) {
            var e = ev || window.event;
            var div = document.getElementById('div');
            div.innerHTML = "clientX: "+e.clientX + ",clientY:"+ e.clientY +
                        "</br> screenX:"+ e.screenX+",screenY:" + e.screenY;
        }

    function test(ev) {
        var e = ev || window.event;
        var div1 = document.getElementById('div1');
        div1.innerHTML = "offsetX:"+ e.offsetX +",offsetY : "+ e.offsetY;
    }
复制代码

接下来就是见证奇迹的时刻 本身玩吧 ~🤣

若是今天看到这篇文章你以为很没有用，不用着急，认证最不缺的就是真香定律！ 期待你再次回顾 😆笔芯🤘