在JavaScript和HTML DOM中，当处理鼠标事件（如mousemove、mousedown、mouseup等）时，可以通过 event.screenX 获取鼠标指针相对于用户屏幕左上角的水平坐标。
下面是一个简单的示例，演示如何使用 screenX：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>screenX Example</title>
<style>
body {
height: 100vh;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
#myDiv {
width: 200px;
height: 200px;
background-color: lightblue;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div id="myDiv">Move your mouse over me</div>
<script>
var myDiv = document.getElementById('myDiv');
myDiv.addEventListener('mousemove', function(event) {
var screenX = event.screenX;
myDiv.innerText = 'Screen X: ' + screenX;
});
</script>
</body>
</html>
在这个例子中，当鼠标在 myDiv 元素上移动时，mousemove 事件被触发，然后使用 event.screenX 获取鼠标的水平坐标，并将其显示在元素内部。这是一个简单的演示，你可以根据实际需求进行更复杂的交互。
转载请注明出处：http://www.pingtaimeng.com/article/detail/6255/JavaScript 和 HTML DOM