Question

我对javascript很新，并且addEventListener函数有一个小问题。我正在尝试构建一些看起来像是按下的按钮＆＃34;按下＆＃34;点击它们之后。总的来说，除了一件事之外，它的效果很好： eventListener仅在第一次单击元素后才起作用（这意味着它不会在第一次点击时触发，但第二次点击）：

<div id="sidebar">
<p class="Lebenslauf" id="btn1" onmouseover="mOver(this)" onmouseout="mOut(this)"><span>Studium</span></p>
<p class="Lebenslauf" id="btn2" onmouseover="mOver(this)" onmouseout="mOut(this)"><span>Arbeit</span></p>
<p class="Lebenslauf" id="btn3" onmouseover="mOver(this)" onmouseout="mOut(this)"><span>Freizeit</span></p>
<p class="Lebenslauf" id="btn4" onmouseover="mOver(this)" onmouseout="mOut(this)"><span>Referenzen</span></p>
</div>
<script>
function addBtnListeners(){
for (var i=1;i<=4;i++){
    btn=document.getElementById("btn"+i);
    btn.addEventListener("click",function(){
        if(this.style.boxShadow=="0px 0px 15px"){
            this.style.boxShadow="0px 0px 0px";
        }else{
            this.style.boxShadow="0px 0px 15px";
        }
    },false);
}
}
addBtnListeners();
function mOver(obj){
    obj.style.backgroundColor="#F1F1F1";
}
function mOut(obj){
    obj.style.backgroundColor="#CCCCCC";
}
</script>

和css：

.Lebenslauf{
    text-align:center;
    background-color:#CCCCCC;
    border-radius:100px;
    height:80%;
    width:10%;
    box-shadow:0px 0px 15px black;
    float:left;
    margin-right:1em;
    margin-left:1em;
    display:table;
}

我很感激有关可能出现的问题或我应该研究的主题的任何提示或提示。

祝你好运

编辑：插入

btn.style.boxShadow="0px 0px 15px";

在我添加eventListeners之前就解决了这个问题！

Answer 1

style属性表示元素上设置的内嵌样式，因此this.style.boxShadow最初将为""，因为样式来自样式表，而非样式表风格属性。

第一次单击会点击else分支，并显式设置内联样式以匹配样式表中级联的样式。然后第二次单击匹配if语句的第一部分。

为什么我的'click'aventListener只在第一次点击后才开始工作？

1 个答案: