MouseEvent clientX 属性
JavaScript基础 2022-06-08 12:06:00小码哥的IT人生shichen
MouseEvent clientX 属性
实例
在 DIV 内单击，并输出该次单击相对于 DIV 元素的 y 坐标：
var x = event.offsetY;完整实例：
<!DOCTYPE html>
<html>
<style>
div {border:1px solid red; height:300px;}
span {font-size:30px;}
</style>
<body>
<h1>MouseEvent offsetY 属性</h1>
<p>offsetY 属性返回鼠标光标相对于目标元素的 y 坐标。</p>
<p>在本例中，红色 DIV 是目标元素。</p>
<p>请在红色 DIV 元素内单击：</p>
<div onclick="myFunction(event)"></div>
<p>相对于 DIV 元素上边缘的 y 坐标是：<span id="demo"></span></p>
<script>
function myFunction(event) {
var y = event.offsetY;
document.getElementById("demo").innerHTML = y;
}
</script>
</body>
</html>可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
您可以在页面下方找到更多 TIY 实例。
定义和用法
offsetY 属性返回鼠标指针相对于目标元素的 y 坐标。
提示：如需获取 x 坐标，请使用 offsetX 属性。
注释：此属性是只读的。
浏览器支持
| 属性 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| offsetY | 支持 | 6 | 39 | 支持 | 支持 |
语法
event.offsetY技术细节
| 返回值： | 数值，表示鼠标指针的垂直坐标，以像素为计。 |
|---|
相关页面
MouseEvent: offsetX 属性
MouseEvent: clientX 属性
MouseEvent: clientY 属性
MouseEvent: screenX 属性
MouseEvent: screenY 属性
