Javascript單擊事件需要雙擊

我有一個簡單的HTML-CSS-JavaScript頁面，其中包含一個用於切換div的按鈕上的事件偵聽器。Javascript單擊事件需要雙擊

但是，所有的工作，但動畫功能需要兩次點擊第一次工作，雖然我安慰了點擊事件，以證明按鈕聽第一次點擊了。

我試圖包裝到window.onload但同樣的事情。

注意：我只想使用純JavaScript。謝謝

的這張照片顯示了第一次點擊（它說，在控制檯「點擊」）：

的這張照片顯示了第二次點擊（動畫發生）：

這裏是我的代碼：

  var showDivButton = document.getElementById('showDivButton'); 
      var info = document.getElementById('info'); 

      showDivButton.addEventListener('click', animation) ; 

      // animation func 
      function animation() { 
       console.log('Clicked!'); 
       if (info.style.display === 'none'){ 
        info.style.display = 'inline-block'; 
        showDivButton.style.background = 'green'; 
       } else { 
        info.style.display = 'none'; 
        showDivButton.style.background = 'gray'; 
       } 

      }

請看My Plunker Here。先謝謝你。

來源

2016-08-23 shireef khatab

嘗試修改你的功能塊如下：

function animation() { 
    console.log('Clicked!'); 
    if (info.style.display == '' || info.style.display == 'none'){ 
     info.style.display = 'inline-block'; 
     showDivButton.style.background = 'green'; 
    } else { 
     info.style.display = 'none'; 
     showDivButton.style.background = 'gray'; 
    } 

}

info.style.display爲''初始

來源

2016-08-23 13:33:41

好的，謝謝，爲什麼info.style.display是''如果在js接受控制之前，樣式與內容一起加載了， –

不好意思空串是什麼意思？ info.style.display =='' –

@shireefkhatab這是因爲每個元素都包含它們的默認樣式，div的顯示是block（或者可能繼承），而頁面剛加載時，這些值將是未定義的或者只是一個空字符串，直到你給它賦值。這就像var a;的console.log（a）的'a'不包含值，直到您爲其指定一個 –

因爲info.style.display指風格的DIV，而不是計算的風格屬性，等等第一次點擊，這沒有設置。

你可能想看看getComputedStyle，但我會建議切換類而不是直接修改樣式。

來源

2016-08-23 13:36:45

Javascript單擊事件需要雙擊

回答

相關問題