html运行实例（event_mouse_offsetx）-搜寻教程库

代码示例：（标识：event_mouse_offsetx）

<!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>