以下是一个简单的例子，演示如何使用 screenX 属性来获取鼠标指针的水平坐标：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>screenX 属性示例</title>
<style>
body {
height: 100vh;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
#target {
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="target" onmousemove="handleMouseMove(event)"></div>
<script>
function handleMouseMove(event) {
var screenX = event.screenX;
console.log('鼠标的水平坐标（相对于屏幕）：', screenX);
}
</script>
</body>
</html>
在这个例子中，当鼠标在蓝色的 <div> 元素上移动时，handleMouseMove 函数会输出鼠标指针的水平坐标（相对于整个屏幕）到控制台。
需要注意的是，screenX 属性提供了一个相对于屏幕的坐标值。如果你需要相对于视口的坐标，可以考虑使用 clientX 属性。而如果需要相对于文档页面的坐标，可以使用 pageX 属性。这些属性都是在不同的上下文中使用的，具体根据你的需求来选择使用。
转载请注明出处：http://www.zyzy.cn/article/detail/4452/HTML