gpt4 book ai didi

javascript - 为什么鼠标坐标不显示

转载 作者:太空宇宙 更新时间:2023-11-03 19:44:08 25 4
gpt4 key购买 nike

我正在学习 javascript DOM。写了这段代码,控制台出现了很多错误。最后一切都解决了。但是鼠标坐标没有显示。了解 addEventListener 和使用 querySelector。我哪里做错了。坚持了两天。
这是 JSFiddle:https://jsfiddle.net/088a9at5/

<!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>
.coordinateBox {
width: 400px;
height: 200px;
border: 2px solid black;
}
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;
document.querySelector("result").innerHTML = coo
}
if(ANS){
ANS.onclick = mouseCoordinate;
}

最佳答案

除了将 querySelector 中的选择器名称更正为 querySelector('.result') 之外,
如果您将点击定位到元素 ANS 上,它将永远不会被触发,因为该元素的高度和宽度为 0;

相反,如果您以 RECT 为目标,它会起作用,

https://jsfiddle.net/088a9at5/4/

关于javascript - 为什么鼠标坐标不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50364982/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com