javascript - 原生JS绑定click事件，第一次点击没反应

Question

第二次开始就可以了，
这个怎么解决呢

Answer 1

首先咱们明确一下，你这个绑定肯定是一开始就绑定上去的！不是第一次没有绑定导致的结果，第一次没有如你预期的结果是因为你取style.display，这个东西取得是什么呢？是一个元素的特性style，特性是什么？只有写在行内的，它才可以取到！所以第一次，虽然你的计算display属性是'block'可是对style.display来说却是''，你可以简单的通过一个log就可以判断出来确实第一次点击就存在绑定的。要解决很简单，不要通过取style.display来判断，

<script type="text/javascript">
        function getStyle(dom, attr) {
            if (dom.currentStyle) {
                return dom.currentStyle[attr]
            } else {
                return getComputedStyle(dom)[attr]
            }
        }

      var p=document.getElementsByClassName("example");
      var btn=document.getElementsByClassName("btn");
      for(let i=0;i<btn.length;i++)
        {
          btn[i].addEventListener("click",function(){
        if(getStyle(p[i], 'display')=='block'){
          p[i].style.display="none";
        }else{
          p[i].style.display='block';
        }
      })
        }
    </script>

如果jq用的多了，一个css()调用就可以取到真正的属性值，难免让人产生错觉，但是其实style只能取到行内属性，对于计算后的css属性，它是无能为力的，第一个helper函数主要解决ie和其他浏览器的不兼容问题，还有感觉题主的代码写的不是特别注意，一些缓存domlist长度，事件委托这些都没有考虑，即使是一个联系demo也应该尽量写的正规提醒自己，以上。谢谢

补充一下吧：
dom.style.att中只可以取到定义在元素标签上的或者由js写入的style属性，通过css定义的属性则取不到！！！
windo.getComputedStyle('dom元素', '伪类名')可以得到一个dom元素（如果不查伪类就不传）的最终style属性，也就是可以取到所有属性，包括定义在css文件的，由浏览器定义的默认样式！但是这个是只读对象！！！老ie不支持此属性，老ie对应的是dom.currentStyle属性！

Answer 2

`

<p class="example" style="display:block;background-color: skyblue;width: 100px;height: 100px;"></p>
<p class="example" style="display:block;background-color: blue;width: 100px;height: 100px;"></p>
<p class="example" style="display:block;background-color: yellow;width: 100px;height: 100px;"></p>
<button class="btn">btn1</button>
<button class="btn">btn2</button>
<button class="btn">btn3</button>
    <script type="text/javascript">
      var p=document.getElementsByClassName("example");
      var btn=document.getElementsByClassName("btn");
      for(let i=0;i<btn.length;i++)
        {
          btn[i].addEventListener("click",function(){
        if(p[i].style.display=='block'){
          p[i].style.display="none";
        }else{
          p[i].style.display='block';
        }
      })
        }
    </script>

`试了一下，没有任何问题，addEventListener刚开始就会把点击事件加上去，没有点击才绑定这一说。

Answer 3

事件是绑定了的，但你开始是不是display:block才是问题，有可能开始不是(可能是inline-block)，点击就转换为block，然后再点才有none

Answer 4

骚年，不存在这种情况，先贴代码出来吧

Answer 5

        <script language="javascript">
            {literal}
            function showblock (){

                var nav=document.getElementById('mobile-inner-nav');
                if(nav.style.display=="none"){
                nav.style.display="block";
                }else{
                    nav.style.display="none";
                }
            }
            {/literal}
        </script>
         我的也是，同求大神回答

Answer 6

把完整代码贴出来 包括html

Answer 7

为什么我认为是闭包的问题？

+function (a) {
    xxx.addEventListener("click", () => {
        xxx[a].style.blablabla = blabla
    })
}(i)