📌  相关文章
📜  HTML | DOM MouseEvent screenX 属性(1)

📅  最后修改于: 2023-12-03 14:41:48.200000             🧑  作者: Mango

HTML | DOM MouseEvent screenX 属性

简介

在 HTML DOM 中，MouseEvent 对象表示用户与页面上的文档元素交互的事件。screenX 属性返回当前鼠标指针的水平位置，以屏幕的左上角为原点。

语法
event.screenX
返回值

通过 screenX 属性获取的数据为整型数字，表示当前鼠标相对于屏幕左上角的水平位置。

示例代码
<!DOCTYPE html>
<html>
<head>
	<title>MouseEvent screenX 属性示例</title>
</head>
<body>
	<h1>MouseEvent screenX 属性示例</h1>
	<p>鼠标在移动时，当前位置的 screenX 值为：<span id="result"></span></p>
	<script>
		// 给文档添加 MouseEvent 事件
		document.addEventListener("mousemove", function(event){
			document.getElementById("result").innerHTML = event.screenX;
		});
	</script>
</body>
</html>
示例说明

该示例代码为一个通过鼠标移动事件获取 MouseEvent 属性值的示例。当鼠标在文档中移动时，将会动态的显示当前鼠标指针相对于屏幕左上角的水平位置。

示例效果

MouseEvent screenX 属性示例效果

注意事项

在使用 screenX 属性时，需要注意以下几点：

  1. screenX 属性返回的数据类型为 Number。
  2. 如果想要获取当前鼠标相对于文档的水平位置，可以使用 event.clientX 属性。
  3. 在使用 MouseEvent 对象时，可以参考 MouseEvent 对象文档来获取更多的属性。
参考链接