MouseEvent offsetX 属性
JavaScript基础 2022-06-08 12:05:57小码哥的IT人生shichen
MouseEvent offsetX 属性
实例
在 DIV 内单击，并输出该次单击相对于 DIV 元素的 x 坐标：
var x = event.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>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
您可以在页面下方找到更多 TIY 实例。
定义和用法
offsetX 属性返回鼠标指针相对于目标元素的 x 坐标。
提示：如需获取 y 坐标，请使用 offsetY 属性。
注释：此属性是只读的。
浏览器支持
| 属性 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| offsetX | 支持 | 6 | 39 | 支持 | 支持 |
语法
event.offsetX
技术细节
| 返回值： | 数值，表示鼠标指针的水平坐标，以像素为计。 |
|---|
相关页面
MouseEvent: offsetY 属性
MouseEvent: clientX 属性
MouseEvent: clientY 属性
MouseEvent: screenX 属性
MouseEvent: screenY 属性
