javascript 在使用onclick需要点击两次才能触发代码，请问这是怎么回事？

问题描述

问 题

对文档里的一个元素节点创建一个onclick事件处理函数，在测试程序的时候，发现需要点击两次才会触发相应的程序，请问这是怎么回事，望大神帮助，或者有遇到相同情况进来讨论

window.onload=function (){ 
    var oDiv=document.getElementById("div");
    var oUl=document.getElementById("ul");

    oDiv.onclick=function (){ 
        if(oUl.style.display=="none"){
            oUl.style.display="block";
            alert(oUl.style.display);
        }else{ 
            oUl.style.display="none";
            alert(oUl.style.display);
        };
    };
};

#ul{ 
    display: none;
    margin: 0 auto;
    padding: 0;
    width: 100px;
    height: 150px;
    text-align: center;
    list-style-type: none;
    border: 1px solid #ccc;
}

这里我设置了alert(oUl.style.display);进行判断oUl.style.display的值，单点击第一次的时候，提示输出的是none，要点击第二次才输出block，可是我在css中就先设置display="none",请问为什么会这样？

---

在oUl.style.display=="none"此处若改成oUl.style.display！="block" 则不会出现需要点击两次的情况,请问这是怎么回事？

解决方案

改改代码：

window.onload=function (){ 
    var oDiv=document.getElementById("div");
    var oUl=document.getElementById("ul");

    oDiv.onclick=function (){ 
        if(window.getComputedStyle(oUl).display=="none"){
            oUl.style.display="block";
            alert(oUl.style.display);
        }else{ 
            oUl.style.display="none";
            alert(oUl.style.display);
        };
    };
};

这篇关于javascript 在使用onclick需要点击两次才能触发代码，请问这是怎么回事？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！