以下是一个简单的例子，演示如何使用 clientX 属性来获取鼠标指针的水平坐标：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>clientX 属性示例</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 clientX = event.clientX;
console.log('鼠标的水平坐标（相对于视口）：', clientX);
}
</script>
</body>
</html>
在这个例子中，当鼠标在蓝色的 <div> 元素上移动时，handleMouseMove 函数会输出鼠标指针的水平坐标（相对于浏览器视口）到控制台。
需要注意的是，clientX 是相对于视口的坐标，如果你需要相对于文档页面的坐标，你可以考虑使用 pageX 属性。而如果需要相对于元素内部的坐标，可以使用 offsetX 属性。这些属性都是在不同的上下文中使用的，具体根据你的需求来选择使用。
转载请注明出处：http://www.zyzy.cn/article/detail/4451/HTML