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

问题描述

问 题

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

解决方案

首先咱们明确一下，你这个绑定肯定是一开始就绑定上去的！不是第一次没有绑定导致的结果，第一次没有如你预期的结果是因为你取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 div=document.getElementsByClassName("example");
      var btn=document.getElementsByClassName("btn");
      for(let i=0;i<btn.length;i++)
        {
          btn[i].addEventListener("click",function(){
        if(getStyle(div[i], 'display')=='block'){
          div[i].style.display="none";
        }else{
          div[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属性！

这篇关于javascript - 原生JS绑定click事件，第一次点击没反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！