光标位置

光标位置 - clientX clientY - 相对于浏览器的位置

var box = document.querySelector(".box");
box.onclick = function(e){
    var e = e || window.event;
    // 光标位置 - clientX clientY - 相对于浏览器的位置，是可视窗口中box与可视窗口的距离
    console.log( e.clientX,e.clientY );
}

offsetX offsetY - 在div上位置

var box = document.querySelector(".box");
box.onclick = function(e){
    var e = e || window.event;
    console.log(e.offsetX,e.offsetY);
}

pageX pageY - 在clientX 和 clientY 的基础上加上滚动过的距离

var box = document.querySelector(".box");
box.onclick = function(e){
    var e = e || window.event;
    console.log(e.pageX,e.pageY);;
}