的JavaScript的addEventListener需要點擊兩下火的功能

這裏就是我遇到的一個小演示：的JavaScript的addEventListener需要點擊兩下火的功能

而且這裏的代碼片段：

HTML：

<div id="frame"> 
<div class="bead col_a" id="a1"></div> 
</div>

CSS：

#frame { 
position: relative; 
height: 205px; 
} 

.bead { 
position: absolute; 
background: black; 
width: 50px; 
height: 25px; 
-moz-border-radius: 50%; 
-webkit-border-radius: 50%; 
border-radius: 50%; 
} 

.bead:hover { 
background-color: white; 
border: 1px solid black; 
} 

#a1 { 
top: 0px; 
}

個

JS：

var a1 = document.getElementById("a1"); 

function fiveToggle(bead1) { 
    if (bead1.style.top === "0px"){ 
    bead1.style.top = "25px"; 
    } else { 
    bead1.style.top = "0px"; 
    } 
} 

a1.addEventListener("click", function(){ fiveToggle(a1); }, false);

的想法是點擊時具有胎圈偏移的位置向上或向下。換句話說，切換。但是，在實現此功能的函數中添加if/else語句會使可點擊的項目在移動之前需要兩次點擊。在最初的額外點擊之後，按需要點擊一下鼠標。如果我從函數中刪除if/else語句來重新定位珠子並添加簡單移動它的代碼（沒有條件檢查），那麼它將按需要工作。我覺得這很好奇。有人會向我解釋爲什麼這樣表現？

來源

2014-04-29 Hunter MacDermut

'bead1'沒有'top'定義，所以它先移到0px。在'fiveToggle'函數的開頭使用'console.log（bead1.style.top）;'來查看它的值。 – Goose

沒有與的addEventListener沒有問題，你必須添加一個條件|| bead1.style.top == ""因爲bead1.style.top是空的默認：

function fiveToggle(bead1) { 
    if (bead1.style.top == "0px" || bead1.style.top == ""){ 
     bead1.style.top = "25px"; 
    } else { 
     bead1.style.top = "0px"; 
    } 
}

你可以做到這一點使用CSS也設置初始頂值0px

來源

2014-04-29 00:19:52 Ragnar

他想知道爲什麼它的行爲如此。不是他怎麼能解決它。 – VtoCorleone

bead1.style.top默認爲空，bead1.style.top ==「0px」爲false – Ragnar

@Ragnar有趣...在我的CSS中，我設置a1的頂部值爲0px。你是說當我將a1傳遞給fiveToggle函數（如bead1）時，它不考慮CSS？顯然不是。我想問題是，如果a1是在CSS中定義的，然後作爲bead1傳遞給一個函數，它不會將其屬性帶入函數中嗎？ –

的JavaScript的addEventListener需要點擊兩下火的功能

回答

相關問題