JS的onclick的事件,为什么要点2次才能触发

发布网友 发布时间：2022-04-23 21:52

我来回答

共1个回答

热心网友 时间：2023-10-11 01:38

估计你的代码是这样的：你可以给div增加一个背景色,

如果父div没给他增加height，则spn.parentNode.style.height为空，所以，你可以给父div增加一个 <div style="height:50px"> 就可以了。 

 <div style=" background-color:green;  ">
        <div style=" background-color:red;width:20px; height:20px; " class="sp">11</div>
    </div>
    <script>

        var spn = document.querySelector(".sp");

        spn.onclick = function () {
            
            var hit = spn.parentNode.style.height;
           alert(hit);
            if (hit == "50px")
            {
                this.parentNode.style.height = "300px";
            }
            else
            {
                this.parentNode.style.height = "50px";
            }
        }

    </script>

var hit=spn.parentNode.style.height;定义到函数外头就不能正常运行的原因，涉及到JS的闭包，这个毕竟难解释，你可以自己查询一下“js闭包”

追问为了不误导各网友，简单说下，这段代码本身有不妥的地方，首先获取高度的方法使用不当，注意是当，不是不对，因为这个hight方法确实可以使用，只是莫名奇妙的需要2次点击鼠标才能用，比较准确的是innerhight这个方法。不过强烈建议，不使用这个属性，本例子的效果只是个伸缩的菜单，很多方法可以实现的，上面提到的放在外面不能用的原因，我调试了下，这个方法在外边获取不到值的，，没法使用，跟闭包没关系