js 事件委托 bug 修复
下面是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 修复的更多相关文章
- JS事件委托学习(转)
JS 事件委托就是利用冒泡原理,把事件加到父级上触发,执行效果. 好处: 1.提高性能 2.新添加的元素还会有之前的事件 <</</</</li></ ...
- JS事件委托的原理和应用
js事件委托也叫事件代理,实际上事件委托就是通过事件冒泡实现的,所谓的事件就是onclick,onmouseover,ondown等等,那么委托呢?委托就是指本来这个事是要你自己做的,但是你却让别人帮 ...
- js事件委托 jQuery写法
http://www.cnblogs.com/liugang-vip/p/5616484.html 不是抄的,这篇文章写的细 这是js 事件委托写法 <!DOCTYPE html> < ...
- 原生js事件委托(事件代理)方法扩展
原生js事件委托(事件代理)方法扩展: 通过Node底层原型扩展委托方法 /** * 事件委托方法 * @param eventName {string}:事件名称,如'click' * @param ...
- js事件委托
什么是事件委托:通俗的讲,onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件. 也 ...
- 彻底弄懂JS事件委托的概念和作用
一.写在前头 接到某厂电话问什么是事件代理的时候,一开始说addEventListener,然后他说直接绑定新的元素不会报dom不存在的错误吗?然后我就混乱了,我印象中这个方法是可以绑定新节点的 ...
- js事件委托篇(附js一般写法和js、jq事件委托写法)
参考: jQuery代码优化:事件委托篇 使用该技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器被添加在他们的父元素上,事件监听器会分析从子元素上冒泡上来的事件,并找到是哪个子元素事件. ...
- js事件委托和jQuery事件绑定on , off , one , bind , unbind , die
一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中, ...
- js 事件委托 事件代理
JavaScript高级程序设计上解释:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 通过例子类比: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三 ...
随机推荐
- EasyMvc入门教程-基本控件说明(13)选项卡导航
选项卡Tab导航主要用于企业页面显示不同子类或者子页面的信息内容. 先来一个基本的使用例子:代码如下: @{ var data = new List<TabItem>() { new Ta ...
- SSD配置
SSD: Single Shot MultiBox Detector - 运行“ make -j32”时出错: nvcc warning : The 'compute_20', 'sm_20', an ...
- sprinvmvc整合swagger实现实时接口信息展示
1.pom.xml引入swagger插件 <dependency> <groupId>io.springfox</groupId> <artifactId&g ...
- springBoot与多数据源的配置
http://www.cnblogs.com/shenlanzhizun/p/5846475.html 最近有点忙,更新有点慢.今天进来说说一说springBoot中如何配置多数据源. 第一,新建一个 ...
- css样式表可以被嵌入网页里面吗?
我们一般听说的是:javascript可以被嵌入到网页任何地方? 而我们一直忽略了css也可以嵌入到网页任何地方 不过,建议这种方式少写,为了浏览器的渲染速度,但对于行内样式来说,这种方式还是比较有效 ...
- 伪静态对struts action的重写
参见 http://ocaicai.iteye.com/blog/1312189 最重要的而是在web.xml中配置 <filter-mapping> <filter-name> ...
- 进程间通信(IPC)介绍(转)
进程间通信(IPC,InterProcess Communication)是指在不同进程之间传播或交换信息. IPC的方式通常有管道(包括无名管道和命名管道).消息队列.信号量.共享存储.Socket ...
- HDFS怎样检測并删除多余副本块
前言 在HDFS中,每时每刻都在进行着大量block块的创建和删除操作,这些庞大的block块构建起了这套复杂的分布式系统.普通block的读写删除操作一般人都或多或少了解过一些,可是过量的副本清理机 ...
- ID3算法Java实现
ID3算法java实现 1 ID3算法概述 1.1 信息熵 熵是无序性(或不确定性)的度量指标.假如事件A的全概率划分是(A1,A2,...,An),每部分发生的概率是(p1,p2,...,pn).那 ...
- Java中使用com.sun相关jar包出现编译错误,但是运行没有错误的解决方法和原因
[解决方法]如果你用的是Eclipse 在preference->java->complier->errors/warning->deprecated and restrict ...