小码哥的IT人生

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 属性

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
ICP备案号:苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024