​x
 
<!DOCTYPE html>
<html>
<style>
div {border:1px solid red; height:300px;}
span {font-size:30px;}
</style>
<body>
​
<h1>MouseEvent offsetX 属性</h1>
​
<p>offsetX 属性返回鼠标光标相对于目标元素的 x 坐标。</p>
​
<p>在本例中，红色 DIV 是目标元素。</p>
​
<p>请在红色 DIV 元素内单击：</p>
​
<div onclick="myFunction(event)"></div>
​
<p>相对于 DIV 元素左边缘的 x 坐标是：<span id="demo"></span></p>
​
<script>
function myFunction(event) {
  var x = event.offsetX;
  document.getElementById("demo").innerHTML = x;
}
</script>
​
</body>
</html>
​