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;
    }
複製代碼

接下來就是見證奇蹟的時刻 本身玩吧 ~🤣

若是今天看到這篇文章你以爲很沒有用，不用着急，認證最不缺的就是真香定律！ 期待你再次回顧 😆筆芯🤘