下面是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. Linux多线程编程-信号量

    在Linux中.信号量API有两组.一组是多进程编程中的System V IPC信号量.另外一组是我们要讨论的POSIX信号量. 这两组接口类似,但不保证互换.POSIX信号量函数都已sem_开头,并 ...

  2. HTML5 Canvas 八星聚义动态效果

    昔有石碣村七星聚义,今有Canvas八星聚义.动态效果是,八颗星以等速螺线慢慢向中心聚集,最后汇聚成一颗. 效果: 代码: <!DOCTYPE html> <html lang=&q ...

  3. AngularJS中选择样式

    代码下载:https://files.cnblogs.com/files/xiandedanteng/angularJSSelectClass.rar 要点,{{ctrl.name}}比<spa ...

  4. SAS学习笔记之函数应用

    今天在做数据需求的时候遇到一些问题,因为不能够在数据库里面做,仅仅好在SAS里面实现.这就遇到了一些麻烦,须要使用一些函数实现部分功能,如查找字段中某个特殊字符出现的次数,查找某个字符的位置等,以下一 ...

  5. centos 7 mariadb 安装

    yum install -y mariadb mariadb-server systemctl start mariadb systemctl enable mariadb #初始化 mysql_se ...

  6. vue2.0 仿手机新闻站(二)项目结构搭建 及 路由配置

    1.项目结构 $ vue init webpack-simple news $ npm install vuex vue-router axios style-loader css-loader -D ...

  7. js:"use strict"; 严格模式

    http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html

  8. Android---61---TabHost简单使用

    与TabHost结合使用的组件: TabWidget:代表选项卡的标签条 TabSpec:代表选项卡的一个Tab页面 TabHost不过一个简单的容器,它提供两个方法来创建.加入选项卡 newTabS ...

  9. Android组件间通信库EventBus学习

    项目地址:   https://github.com/greenrobot/EventBus EventBus主要特点 1. 事件订阅函数不是基于注解(Annotation)的,而是基于命名约定的,在 ...

  10. rtems 4.11 IRQ (arm,beagle)

    arm IRQ入口在 cpukit/score/arm/arm_exec_interrupt.S 中,其中BSP最关心就是 bl bsp_interrupt_dispatch 这句,看看beagle ...