<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
)
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.