js 利用事件委托解决mousedown中的click

有一个需求是这样的：

父元素div绑定一个mousedown事件，子元素a绑定一个click事件。

看解构：

<div id="nav"><a href="javascript:void(0);">点我</a></div>

搜了很多相关的都没有解决办法，于是我想到了事件委托，在父元素被mousedown的时候，event对象里包含了很多有用的东西。其中target就是关键！

代码：

//原生js走起
const nav = document.querySelector('#nav');const a = nav.querySelector('a');a.addEventListener("click",function(e){alert("a被点了");//e.stopPropagation();});nav.addEventListener("mousedown",function(e){(e.target.tagName).toLowerCase() === 'a' ? a.click :alert('你点击的是父元素');        });

这样，只要判断到我们点击到区域有a标签，说明我点击到了它，然后模拟触发一次click，就完成了我的需求了。

转载于:https://www.cnblogs.com/webSong/p/9234205.html

js 利用事件委托解决mousedown中的click相关推荐

js原生事件委托写法，jquery事件委托写法
什么是事件委托: 事件委托--给父元素绑定事件,用来监听子元素的冒泡事件,并找到是哪个子元素的事件.(不理解冒泡的可以去百度下) 定义: 利用事件冒泡处理动态元素事件绑定的方法,专业术语叫事件委托. ...
vue利用事件委托实现按钮互斥,并传递对应的值
效果如下: 事件委托:也称事件代理原理:事件委托就是利用事件冒泡,指定一个事件处理程序,就可以管理这一类型的所有事件. 应用场景:我有一个ul标签,下面有很多li标签,每个li标签都需要添加事件,难 ...
vue学习：事件传递（冒泡和捕获），事件委托，jquery中的事件委托，$event 获取元素，vue事件修饰符
事件传递 ----冒泡和捕获 DOM事件标准定义了两种事件流,这两种事件流分别是捕获和冒泡. 和许多Web技术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们.Netscape选 ...
button layui 点击事件_解决layui中的form表单与button的点击事件冲突问题
解决layui中的form表单与button的点击事件冲突问题 layui的form表单位置和button标签的位置重合,会使得button的click事件得不到响应,如图: 蓝色底为form的位置, ...
js onclick事件一闪而过解决
js onclick事件一闪而过原因是页面中onclick点击事件在a标签,a标签会刷新页面两种解决办法: 1.在a标签href中加入 javascript:; 或者javascript:void ...
js原生事件委托的实现
原生js事件委托实现 html界面 <ul id="example"><li>111<span><input type="tex ...
js 用事件委托实现删除节点
用事件委托来处理子节点的相同点击事件的好处是 1.假如节点是动态生成的不需要在手动添加点击事件 2.不用循环遍历为每一个子节点添加点击事件代码实现思路 // 获取父节点元素var nUls = do ...
ItClust：利用迁移学习解决scRNA-seq中的细胞聚类问题
目录背景描述方法 ItClust架构使用源网络从source data提取信息将细胞信息从source data迁移到target data 在target data上微调细胞类型分配补充 ...
js 冒泡事件与解决冒泡事件
事件冒泡 :当一个元素接收到事件的时候会把他接收到的事件传给自己的父级,一直到window . 代码: <div id="div1"> <div id=&quo ...

js 利用事件委托解决mousedown中的click

js 利用事件委托解决mousedown中的click相关推荐

最新文章

热门文章