关于鼠标事件相对于浏览器位置

clientX当鼠标事件发生的时候，鼠标相对于浏览器左侧的距离
clientY当鼠标事件发生的时候，鼠标相对于浏览器Y轴的位置

<div id="box"></div> 
<div id="wrap"></div>

var box = document.querySelector('#box');
document.onclick = function (e) {
  console.log(e);
  // 1.关于鼠标事件相对于浏览器位置的
  // clientX当鼠标事件发生的时候，鼠标相对于浏览器左侧的距离
  // clientY当鼠标事件发生的时候，鼠标相对于浏览器Y轴的位置
  box.innerHTML = e.clientX + '|' + e.clientY;
}
var wrap = document.querySelector('#wrap');
wrap.onclick = function (e) {
  console.log(e);
  this.innerHTML = e.offsetX + '|' + e.offsetY;
}

#box {
  width: 200px;
  border: 1px solid red;
  font-weight: bolder;
}

#wrap {
  width: 360px;
  height: 360px;
  background-color: skyblue;
  margin: 100px 0;
  font-size: 18px;
}

代码演示：