<div id="wrap">
  <table>
    <thead>
    <tr>
      <th>property</th>
      <th>position</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>screenX</td>
      <td><span id="screenX"></span>px</td>
    </tr>
    <tr>
      <td>clientX</td>
      <td><span id="clientX"></span>px</td>
    </tr>
    <tr>
      <td>pageX</td>
      <td><span id="pageX"></span>px</td>
    </tr>
    <tr>
      <td>offsetX</td>
      <td><span id="offsetX"></span>px</td>
    </tr>

    <tr>
      <td>screenY</td>
      <td><span id="screenY"></span>px</td>
    </tr>
    <tr>
      <td>clientY</td>
      <td><span id="clientY"></span>px</td>
    </tr>
    <tr>
      <td>pageY</td>
      <td><span id="pageY"></span>px</td>
    </tr>
    <tr>
      <td>offsetY</td>
      <td><span id="offsetY"></span>px</td>
    </tr>
    </tbody>
  </table>

  <div id="box">
    <p>四角形の中でマウスを動かしてください。</p>
    <p>「client」と「page」の違いを確認したい場合、スクロールしてからマウスを動かしてください。</p>
  </div>
</div>
body {
  height: 1000px;
  width: 3000px;
}

#wrap {
  display: flex;
  position: fixed;
}

#box {
  margin-left: 20px;
  width: 300px;
  height: 300px;
  border: 1px solid #777;
  background-color: #ddd;
}

table {
  margin-top: 16px;
  border-collapse: collapse;
}

table th, table td {
  border: solid 1px #ccc;
  padding: 4px;
}
update = e => {
  document.getElementById('screenX').textContent = e.screenX
  document.getElementById('clientX').textContent = e.clientX
  document.getElementById('pageX').textContent = e.pageX
  document.getElementById('offsetX').textContent = e.offsetX

  document.getElementById('screenY').textContent = e.screenY
  document.getElementById('clientY').textContent = e.clientY
  document.getElementById('pageY').textContent = e.pageY
  document.getElementById('offsetY').textContent = e.offsetY
}

box = document.getElementById('box')
box.addEventListener(
  'mousemove', 
  e => update(e),
  false
)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.