下面是html 内容:

<ul id="oul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul> <button id="btn">添加元素</button>

我需要给li 绑定事件,打印点击的内容

let oUl = document.getElementById('oul')
let lis = oUl.getElementsByTagName('li')
let btn = document.getElementById('btn') btn.onclick = function(){
let oLi = document.createElement('li');
oLi.innerHTML = lis.length+1
oUl.appendChild(oLi)
} oUl.onclick = function(event) {
var e = event || window.event;
console.log(e.target.innerHTML)
}

如果点击到正确的元素是不会出错的,但是一旦拖拽或者点到空白区域,就会打印全部元素

为了避免这个bug,只需要进行一个简单的判断target

oUl.onclick = function(event) {
var e = event || window.event;
// 判断点击的元素是不是代理元素
if(e.target == this){
return
}
console.log(e.target.innerHTML)
}

接下来再次测试:

js 事件委托 bug 修复的更多相关文章

  1. JS事件委托学习(转)

    JS 事件委托就是利用冒泡原理,把事件加到父级上触发,执行效果. 好处: 1.提高性能 2.新添加的元素还会有之前的事件     <</</</</li></ ...

  2. JS事件委托的原理和应用

    js事件委托也叫事件代理,实际上事件委托就是通过事件冒泡实现的,所谓的事件就是onclick,onmouseover,ondown等等,那么委托呢?委托就是指本来这个事是要你自己做的,但是你却让别人帮 ...

  3. js事件委托 jQuery写法

    http://www.cnblogs.com/liugang-vip/p/5616484.html 不是抄的,这篇文章写的细 这是js 事件委托写法 <!DOCTYPE html> < ...

  4. 原生js事件委托(事件代理)方法扩展

    原生js事件委托(事件代理)方法扩展: 通过Node底层原型扩展委托方法 /** * 事件委托方法 * @param eventName {string}:事件名称,如'click' * @param ...

  5. js事件委托

    什么是事件委托:通俗的讲,onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件. 也 ...

  6. 彻底弄懂JS事件委托的概念和作用

    一.写在前头    接到某厂电话问什么是事件代理的时候,一开始说addEventListener,然后他说直接绑定新的元素不会报dom不存在的错误吗?然后我就混乱了,我印象中这个方法是可以绑定新节点的 ...

  7. js事件委托篇(附js一般写法和js、jq事件委托写法)

    参考: jQuery代码优化:事件委托篇 使用该技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器被添加在他们的父元素上,事件监听器会分析从子元素上冒泡上来的事件,并找到是哪个子元素事件. ...

  8. js事件委托和jQuery事件绑定on , off , one , bind , unbind , die

    一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中, ...

  9. js 事件委托 事件代理

    JavaScript高级程序设计上解释:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 通过例子类比: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三 ...

随机推荐

  1. HDU1565方格取数

    典型的状态压缩DP问题.第i行的取法只受到第i-1行的影响.首先每一行的取法要相容(不能有两个相邻),然后相邻行之间也要相容.将每一个格子看做两种状态,1表示取,0表示不取.这样每一行就是一个01串, ...

  2. vuex 深入理解

    参考自:https://mp.weixin.qq.com/s?src=11&timestamp=1528275978&ver=922&signature=ZeHPZ2ZrLir ...

  3. js传递默认形参

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  4. cnBlogs windows LIves Writes 安装

    1. 官网下载安装 http://group.cnblogs.com/topic/8550.html   参照这个网址下载并安装软件,顺利的话,就万事大吉.但是,如果报错的话,比如我出现的报错的代码是 ...

  5. Javascript模式(三) 策略模式

    var data = { "username" : "zhangsan", "password" : "12345690" ...

  6. document.readyState和xmlhttp.onreadystatechange

    document.readyState的几种状态 0-uninitialized:XML 对象被产生,但没有任何文件被加载. 1-loading:加载程序进行中,但文件尚未开始解析. 2-loaded ...

  7. SpringBoot启动流程分析(二):SpringApplication的run方法

    SpringBoot系列文章简介 SpringBoot源码阅读辅助篇: Spring IoC容器与应用上下文的设计与实现 SpringBoot启动流程源码分析: SpringBoot启动流程分析(一) ...

  8. 使用OpenGL进行Mandelbrot集的可视化

    Mandelbrot集是哪一集?? Mandelbrot集不是哪一集!! 啊不对-- Mandelbrot集是哪一集!! 好像也不对-- Mandelbrot集是数集!! 所以--他不是一集而是数集? ...

  9. Android中BaseAdapter使用基础点

    Android中要填充一些控件(如ListView)经常须要用到Adapter来实现,经常使用的有ArrayAdapter,SimpleAdapter, CursorAdapter,BaseAdapt ...

  10. uboot生成随机的MAC地址

    转载:http://blog.chinaunix.net/uid-25885064-id-3303132.html 在使用U-boot时,有个问题就是MAC地址的设置,如果MAC地址相同的两块开发板在 ...