关于javaScript中onmousemove事件没效果的原因解释

最新推荐文章于 2023-07-05 23:37:25 发布

lxn_李小牛

最新推荐文章于 2023-07-05 23:37:25 发布

阅读量1.1w

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Small_Lee/article/details/72967506

前言

onmouseXXX事件是用来监听鼠标相关的操作的，例如有onmousedown,onmousemove,onmouseout等，今天我们来看看onmousemove方法的使用，以及注意事项。

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body onmousemove="test()" style="margin: 0;">
        <div id="app" style="background: red;">aa</div>
        <script type="text/javascript">
        var app = document.getElementById("app");
        function test(){
            var x = event.clientX;
            var y = event.clientY;
            app.innerText = "x: "+x + "y: " + y
        }
    </script>
    </body>
</html>

效果图
这里写图片描述

我们要实现的效果是当鼠标在整个页面上移动时，在div标签内显示出当前鼠标位置在浏览器中的坐标，但是当你运行上面的代码时，你发现只有鼠标放到div所在的范围内时，才会显示坐标信息。要想在整个页面中能起到效果，需要采用下面的方式。

方式一： 只采用body标签作为跟标签

<body onmousemove="test()" style="margin: 0;">
        <div id="app" style="background: red;">aa</div>
        <script type="text/javascript">
        var app = document.getElementById("app");
        function test(){
            var x = event.clientX;
            var y = event.clientY;
            app.innerText = "x: "+x + "y: " + y
        }
    </script>
    </body>

方式二： 在代码中监听

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body style="margin: 0;">
        <div id="app" style="background: red;">aa</div>
        <script type="text/javascript">
        var app = document.getElementById("app");
        function test(){
            var x = event.clientX;
            var y = event.clientY;
            app.innerText = "x: "+x + "y: " + y
        }
        //此处test没有括号
        document.onmousemove = test;
    </script>
    </body>
</html>