源生JS之onclick绑定事件单击两次才启动的探索_1

Posted on 2018-01-21 21:34  Jonathan_C  阅读(737)  评论(0)    收藏  举报

今天被老弟问了一个问题，就是他写的onclick事件虽然触发了，但是需要鼠标点击两次才能有效果，并且之后只要不刷新页面，只需要点击一次就行。废话不多说， 贴代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <script type="text/javascript">
 6 
 7     window.onload=function(){
 8     var show=document.getElementById("id");    
 9     var btn=document.getElementById("button");
10     btn.onclick=function(){
11         if(show.style.display=='none'){
12                 show.style.display='block';
13                 //alert('!!');
14         }
15         else{
16             show.style.display="none";
17             }
18     }    
19 }
20     </script>
21     <link rel="stylesheet" type="text/css" href="mycss.css">
22     <title>Trial</title>
23 </head>
24 <body>
25     <div id="id" class="style">
26         <div>Toggle me</div>
27     </div>
28     <button id="button">Click to Toggle</button>
29 </body>
30 </html>
1 .style{
2     display: none;
3 }

其实就是想通过点击button按钮，实现某个div元素块的隐藏和出现。功能很简单，但是问题就出在第一次点击button的时候，没有任何反应。用alert调试的时候，也没有出现！！

可以确定的是：和onload无关，和onclick的绑定方法无关。

那么问题出现在哪呢？是style样式的属性问题？还是和事件冒泡有关呢？其实弄了两小时也没搞明白，但是这个问题的解决方法是

1 btn.onclick=function(){
2         if(show.style.display==''){
3                 show.style.display='block';
4                 alert('!!');
5         }
6         else{
7             show.style.display="";
8             }
9     }

直接改判断条件为空，css样式不改。这样点击一次就能有反应。但是底层是怎样实现的呢？目前还是不明白 。

也许等我学到事件冒泡会有些头绪吧。。