Question

我正在学习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;
}

Answer 1

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

相反，如果你定位RECT，那么

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

Answer 2

你错过了两个。在.result中你需要在矩形上创建一个监听器，而不是在结果上。

＆＃13;

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){
  RECT.onclick = mouseCoordinate;
}

＆＃13;

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

＆＃13;

<h1 onmouseover="style.color='red'" onmouseout="style.color='black'">Mouse over this text</h1>
<div class="coordinateBox"></div>
<div class="result"></div>

＆＃13;

Answer 3

您错过了.中应该document.querySelector("result")的{{1}}。

另一个主要问题是您尚未添加事件监听器。

document.querySelector(".result")

以下是您现在正在使用的 jsfiddle， 。

此外，这是一个非常简单的 codepen ，它说明了这些细节。

P.S。在您的jsfiddle中，您还没有设置RECT.addEventListener('mousemove', mouseCoordinate)的样式，因此很难说出您想要将点击事件附加到什么内容？由于某种原因，它不允许我设置ANS元素的样式：/

Answer 4

基于你的小提琴因为您刚刚错过了此行中的班级标识sys.path.append(os.path.dirname(os.path.abspath(__file__)) + "\\modules") .之前const ANS = document.querySelector("result"); 它应该是这样的 result

const ANS = document.querySelector(".result");此行也是如此。

并为document.querySelector("result").innerHTML = coo div和边框提供一些高度和宽度，以便您可以查看必须点击的区域。

为什么小鼠coodrinates没有出现

4 个答案: