Question

我想在页面中显示鼠标坐标，当我没有声明DOCTYPE时，它可以正常工作，但是当我声明DOCTYPE时它不会！你能帮帮我吗？这是我的代码：

<html>
<head>
    <title>problem</title>
</head>
<body>
    text...
<div id="show"></div>
<script>
    document.body.onmousemove = function(event) {
        document.body.innerHTML = "X: " + window.event.clientX + "<br />" + "Y: " + window.event.clientY;
    }
</script>
</body>
</html>

在上面的代码中我可以得到y坐标没有问题但是当我添加doctype时它没有正确显示y坐标：

<DOCTYPE html>
<html>
<head>
    <title>problem</title>
</head>
<body>
    text...
<div id="show"></div>
<script>
    document.body.onmousemove = function(event) {
        document.body.innerHTML = "X: " + window.event.clientX + "<br />" + "Y: " + window.event.clientY;
    }
</script>
</body>
</html>

修改

这是我的代码，它现在完美运行。谢谢大家：

<!DOCTYPE html>
<html>
  <head>
    <title>problem</title>
  </head>
  <body>
    text...
    <div id="show"></div>
    <script>
    if (document.addEventListener) {
      document.addEventListener('mousemove', function(event) {
        document.body.innerHTML = "X: " + window.event.clientX + "<br />" + "Y: " + window.event.clientY;
      });
    } else {
      document.attachEvent("onmousemove", function(event) {
        document.body.innerHTML = "X: " + window.event.clientX + "<br />" + "Y: " + window.event.clientY;
      });

}
   </script>
  </body>
</html>

Answer 1

尝试使用事件侦听器侦听鼠标事件，如下所示：

<!DOCTYPE html>
<html>
  <head>
    <title>problem</title>
  </head>
  <body>
    text...
    <div id="show"></div>
    <script>
    document.addEventListener('mousemove', function(event) {
        document.body.innerHTML = "X: " + window.event.clientX + "<br />" + "Y: " + window.event.clientY;
    });
   </script>
  </body>
</html>

Answer 2

首先通过编写DOCTYPE代替<!DOCTYPE html>来更正<DOCTYPE html>的声明。

其次，将脚本更改为：

document.addEventListener('mousemove', function(event) {
    document.body.innerHTML = "X: " + event.clientX + "<br />" + "Y: " + event.clientY;
});

对于函数中传递的参数可以直接引用，写window.event将是event成为window对象的子对象，换句话说就是全局对象。

Javascript鼠标坐标并声明DOCTYPE

2 个答案: