21-位置获取

<div id="box"></div>
var oDiv = document.getElementById("box");

• offsetX/offsetY: 事件触发相对于当前元素自身的位置

    oDiv.onclick = function (event) {
        event = event || window.event;
        console.log("offsetX", event.offsetX);
        console.log("offsetY", event.offsetY);
    }
  

• clientX/clientY: 事件触发相对于浏览器可视区域的位置

  • 注意点: 可视区域是不包括滚动出去的范围的

    oDiv.onclick = function (event) {
        event = event || window.event;
        console.log("clientX", event.clientX);
        console.log("clientY", event.clientY);
    }
  

• pageX/pageY: 事件触发相对于整个网页的位置

  • 注意点: 整个网页包括滚动出去的范围的

    oDiv.onclick = function (event) {
        event = event || window.event;
        console.log("pageX", event.pageX);
        console.log("pageY", event.pageY);
    }
  

• screenX/screenY: 事件触发相对于显示器屏幕的位置(了解)