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。先谢谢你。

答

尝试修改你的功能块如下：

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为''初始

好的，谢谢，为什么info.style.display是''如果在js接受控制之前，样式与内容一起加载了， –

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

@shireefkhatab这是因为每个元素都包含它们的默认样式，div的显示是block（或者可能继承），而页面刚加载时，这些值将是未定义的或者只是一个空字符串，直到你给它赋值。这就像var a;的console.log（a）的'a'不包含值，直到您为其指定一个 –

答

因为info.style.display指风格的DIV，而不是计算的风格属性，等等第一次点击，这没有设置。

你可能想看看getComputedStyle，但我会建议切换类而不是直接修改样式。

Javascript单击事件需要双击

相关推荐