js中的onclick事件在ul获取li时点击两次才会执行的原因

最新推荐文章于 2024-10-14 20:34:19 发布

Strive_18

最新推荐文章于 2024-10-14 20:34:19 发布

阅读量5k

点赞数 3

分类专栏： Javascript知识

本文链接：https://blog.csdn.net/TC_16_zl/article/details/80294284

版权

12 篇文章

订阅专栏

 
 js中的onclick事件在ul获取li时点击两次才会执行的原因 

 
 下面的代码中 只有onclick第二次才会执行函数内部的代码 

 
 代码实例如下： 

 
 <!DOCTYPE html> 

 
 <html> 

 
  <head> 

 
  <meta charset="utf-8"> 

 
  <title>js点击事件</title> 

 
  <script type="text/javascript" src="jquery.js"></script> 

 
  </head> 

 
  <body> 

 
  <ul id="mylist1"> 

 
  <li>我喜欢吃</li> 

 
  </ul> 

 
  <ul id="mylist2"> 

 
  <li>鸡腿</li> 

 
  <li>薯片</li> 

 
  <li>汉堡</li> 

 
  </ul> 

 
  <button id="btn" class="btn1">添加</button> 

 
  <script> 

 
  window.onload = function(){ 

 
  var oBtn = document.getElementById('btn'); 

 
  oBtn.onclick = function(){ 

 
  var oUl1 = document.getElementById('mylist1'); 

 
  var oUl2 = document.getElementById('mylist2'); oUl1.appendChild(oUl2.firstChild); 

}

}

 
  </script> 

 
  </body> 

 
 </html> 

 
 出现此问题的原因是 

 
 firstChild 获得的是元素的第一个子元素 ul中的第一个子元素并不是第一个li标签 而是ul与第一个li之间的空格  

 
 解决的办法 

 
 1、将ul与li之间的空格全都删掉 

 
 2、使用children来调用li children[0]则是第一个li标签 

 
 下面的代码可以实现点击一次onclick 可以执行一次函数内部的代码 

 
 代码如下： 

 
 <!DOCTYPE html> 

 
 <html> 

 
  <head> 

 
  <meta charset="utf-8"> 

 
  <title>js点击事件</title> 

 
  <script type="text/javascript" src="jquery.js"></script> 

 
  </head> 

 
  <body> 

 
  <ul id="mylist1"> 

 
  <li>我喜欢吃</li> 

 
  </ul> 

 
  <ul id="mylist2"> 

 
  <li>鸡腿</li> 

 
  <li>薯片</li> 

 
  <li>汉堡</li> 

 
  </ul> 

 
  <button id="btn" class="btn1">添加</button> 

 
  <script> 

 
  window.onload = function(){ 

 
  var oBtn = document.getElementById('btn'); 

 
  oBtn.onclick = function(){ 

 
  var oUl1 = document.getElementById('mylist1'); 

 
  var oUl2 = document.getElementById('mylist2'); 

 
  oUl1.appendChild(oUl2.children[0]); 

}

}

 
  </script> 

 
  </body> 

 
 </html> 

 
 注：也可以通过jQuery中的on()事件通过class属性调用click事件 可以使click事件在点击第一次时就会执行函数内部的代码 