2020-09-24

最新推荐文章于 2025-07-29 18:18:43 发布

ma-tianxiang

最新推荐文章于 2025-07-29 18:18:43 发布

阅读量127

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： js javascript jquery

本文链接：https://blog.youkuaiyun.com/Matx07/article/details/108766550

笔记专栏收录该内容

3 篇文章

订阅专栏

作者参考代码做放大镜练习时，JS运行报错“Cannot set property ‘onmouseenter’ of null”。经分析，是因JS引入位置问题，浏览器先加载节点再执行JS，解析时找不到绑定节点致报错。解决办法是在head或外部js头部引入window.onload函数，放入预加载内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Cannot set property ‘onclick’ of null 问题

昨晚打算参考老陈代码做一个放大镜练手，刚开始发现js就运行不了，出师不利，搞得我很烦

看代码

<body>
            <div class="fdj">
                <div class="left">
                <div class="zhezhao"></div>
                </div>
                <div class="right"></div>
            </div>
</body>

外部引入js

var left =document.querySelector(".left");
    var zhezhao= document.querySelector(".zhezhao");
left.onmouseenter = function(){
    zhezhao.style.display = "block";
 }

发现页面鼠标移入div-left没有效果，打开控制台看到Cannot set property ‘onmouseenter’ of null at index.js:2而老陈代码演示的代码却完美运行，代码如下：

             <div class="fdj">
                <div class="left">
                <div class="zhezhao"></div>
                </div>
                <div class="right"></div>
              </div>
              <script type="text/javascript">
                  var left =document.querySelector(".left");
                  var zhezhao= document.querySelector(".zhezhao");
                  left.onmouseenter = function(){
                   zhezhao.style.display = "block";
                    }
              </script>

而当我不甘失败，又将外部js写到head标签中，还是报错，这是为什么呢？

可以发现，我与演示代码的区别仅在js引入的位置不同，可就是因为这个位置，导致了我的错误。
因为浏览器先加载完节点再执行JS，所以当浏览器自顶向下解析时，找不到onmouseenter绑定的节点，也就是将onmouseenter设置为null，于是报错。
解决方法：
仅要在head头部或者外部js头部引入window.οnlοad=function(){},将需要预加载的内容放入此函数中即可。例如：

window.onload=function(){
    var left =document.querySelector(".left");
    var zhezhao= document.querySelector(".zhezhao");
left.onmouseenter = function(){
    zhezhao.style.display = "block";
 }
}