学习JavaScript DOM：鼠标坐标无法显示，请求错误排查

嘿，我瞅了你的代码，很快就揪出了几个导致坐标没法正常显示的小问题，咱们一个个来修正：

问题1：类选择器漏了关键的点号（.） #

你用querySelector获取.result元素时，写成了document.querySelector("result")和const ANS = document.querySelector("result");——这里的result是类名，必须加上.才能让浏览器识别到是选中类元素，不然它会误以为你要找<result>这种不存在的标签。

问题2：事件绑定的对象和类型搞错了 #

你现在把坐标显示的函数绑定到了.result元素的点击事件上，但你要的是在.coordinateBox里移动鼠标时显示坐标啊！所以得给RECT（也就是.coordinateBox）绑定mousemove事件，而不是给结果框绑点击事件。

修正后的完整代码 #

HTML #

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>MouseEvent</title>
    <link rel="stylesheet" href="style.css">
</head> 
<body> 
    <h1 onmouseover="style.color='red'" onmouseout="style.color='black'">Mouse over this text</h1>
    <div class="coordinateBox"></div>
    <div class="result"></div>
    <script src="script.js"></script>
</body> 
</html>

CSS #

.coordinateBox { 
    width: 400px; 
    height: 200px; 
    border: 2px solid black; 
}

JavaScript #

const RECT = document.querySelector(".coordinateBox"); 
const ANS = document.querySelector(".result"); 

function mouseCoordinate(e) { 
    var x = e.clientX; 
    var y = e.clientY; 
    var coo = "X : " + x + " Y : " + y; 
    ANS.innerHTML = coo; // 直接用提前获取的ANS元素，不用重复调用querySelector
} 

if(RECT){ 
    RECT.addEventListener('mousemove', mouseCoordinate); // 用你正在学习的addEventListener绑定鼠标移动事件
}

顺便提个小优化：既然已经提前获取了ANS元素，函数里就不用再重复querySelector了，直接用变量更高效。而且用addEventListener绑定事件确实比传统的onxxx方式更灵活，正好贴合你现在的学习内容~

内容的提问来源于stack exchange，提问作者Tarique