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事件在点击第一次时就会执行函数内部的代码

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

  1. js中的onclick事件和JQuery中的click方法以及on方法事件用法总结

    1.onclick是绑定的事件(它是一个事件),注意该事件绑定只是JacaScript中有(js中的),Jquery中并没有此事件,告诉浏览器在鼠标点击时候要做什么 2.click方法(jquery中 ...

  2. jq onclick 定义_关于js中的onclick事件和JQuery中的click方法

    1.onclick是绑定的事件(它是一个事件),注意该事件绑定只是JacaScript中有,Jquery中并没有此事件,告诉浏览器在鼠标点击时候要做什么 测试onclick事件 function mo ...

  3. JS中常用的事件操作

    JS中常用的事件操作 前言 一.点击事件(导航栏内容切换功能) 二.移入移出事件(导航栏菜单下拉功能) 三.失去焦点事件(表单检验功能) 四.鼠标事件(鼠标跟随功能) 五.键盘事件(打飞机案例) 总结 ...

  4. js中遍历注册事件时索引怎么获取

    注意:这种写法,是有问题的. 注册事件是在页面加载完毕以后就完成了,但此时并没有触发事件.事件触发是由用户在页面上点击时才会触发,所以说当用户点击时,才会执行事件处理函数,那么此时的i已经变成了4,最 ...

  5. JS里的onclick事件

    可以通过以下代码了解JS里的onclick事件: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml&quo ...

  6. html事件中写js,html标签中绑定触发事件与js中绑定触发事件写法上的区别

    html> js中方法名后加括号和不加口号的区别 按钮 var test = function(){ var span = document.createElement("span&q ...

  7. js click 与 onclick 事件绑定,触发与解绑

    click 与 onclick 1.onclick 事件会在对象被点击时发生. <input id="btn1" type="button" οnclic ...

  8. JS中的click事件无反应

    JS中的click事件无反应 今天在一个js文件中写了一个click函数,结果在页面中点击后死活没有反应,各种检查之后代码也没问题,就是无法触发click函数.各种百度之后终于找到了问题所在:在点击的 ...

  9. 使用onclick()事件以及this获取当前标签属性值的问题

    使用onclick()事件以及"this"获取当前标签属性值的问题 代码: 效果图: 进行操作时点击对应的button需要获取其对应的id值,类.ID选择器并不适用与获取动态的数据 ...

最新文章

  1. 微信小程序登录，后端获取信息的问题
  2. Magic Leap 2实测出炉：视场角增大20度，重量减轻20%，透光率低至0.3%让AR特效更逼真...
  3. 二分匹配（匈牙利算法）模板
  4. Flask Web 开发 错误页面自定义
  5. 查看目标主机安装的杀毒软件
  6. mybatis-plus主键配置、全局配置
  7. 【华为云技术分享】小白篇，认识Python最最最常用语重要的库Requests
  8. 请画出使用mapreduce对英文句子_「Postgresql架构」用MapReduce的方式思考，但使用SQL...
  9. Google工程师多图详解Android系统架构
  10. dojochina ExtJS视频解压密码
  11. 才知道系列之GroupOn
  12. Linux下开启关闭查看软件包信息
  13. 怎么把python从c盘移到d盘_如何转移Pycharm的设置或者缓存到其他盘
  14. 连接摄像头拍照并识别图片中二维码
  15. A100 Jeston TX1TX2使用教程-接口说明
  16. 关于JavaScript的Object所有方法
  17. oracle怎么使用Xmanager,Xmanager使用总结
  18. 汉诺塔问题（C语言代码）
  19. qt widget 最大_Qt窗口操作函数（最大化，全屏，隐藏最大化，最小化）
  20. 阿里云物联网平台添加网关设备和子设备

热门文章

  1. 全球速卖通集成HMS Core，打造全新购物体验
  2. [笔记]Windows核心编程《番外篇》几种常见的执行命令行方法
  3. Python+uiautomator2实现自动刷抖音视频
  4. linux中启动tomcat后浏览器无法访问的解决方法之防火墙关闭
  5. python统计文字个数_如何使用python语言中的count方法统计字符个数
  6. iPhone Apple App Store购买应用后，不想买了，退款的方法
  7. MapReduce 编程实战
  8. 跨站脚本攻击 XSS原理
  9. 使用logbook打印http请求日志
  10. 删除df中值为指定值的行