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,就完成了我的需求了。
js 利用事件委托解决mousedown中的click的更多相关文章
- Js 事件委托 解决动态元素不能click点击的问题
参考教程地址 https://blog.csdn.net/xiaolong20081/article/details/79792137 不想写了.直接看上面就行 采用事件委托或代理方式绑定 $(doc ...
- JS与Jquery的事件委托——解决了绑定相同事件的问题
概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完 ...
- 【转】利用匿名namespace解决C++中重复定义的问题
目录 利用匿名namespace解决C++中重复定义的问题 原文:https://blog.csdn.net/pi9nc/article/details/11267031 利用匿名namespace解 ...
- JS:事件委托
事件委托 事件流 事件流描述的是从页面中接收事件的顺序.---JS高级程序设计(第3版) DOM Level 2 Events规定的事件流有三个阶段:①事件捕获阶段.②处于目标阶段.③事件冒泡阶段 事 ...
- Js - JQ事件委托( 适用于给动态生成的脚本元素添加事件)
最近一段时间打了一个大仗,现在总算消停点,才有时间来做个总结吧算是: 移动端遇到一个项目,是一个列表的侧滑栏,在我这里用jq写的交互事件.自测各方面都挺好的,美滋滋的给了研发.研发也美滋滋的开始开发. ...
- JS 的事件委托机制
以前写上图所示的鼠标点击触发事件,一般都是用如下所示的给每一个表示列表的标签绑定一个click事件(演示用的例子的框架是React): 毫无疑问,这样是比较繁琐的,以后维护修改改个函数名什么的还不方便 ...
- js的事件委托
什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事 ...
- 浅谈利用同步机制解决Java中的线程安全问题
我们知道大多数程序都不会是单线程程序,单线程程序的功能非常有限,我们假设一下所有的程序都是单线程程序,那么会带来怎样的结果呢?假如淘宝是单线程程序,一直都只能一个一个用户去访问,你要在网上买东西还得等 ...
- js的事件委托机制
如今的JavaScript技术界里最火热的一项技术应该是‘事件委托(event delegation)’了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们的父 ...
随机推荐
- OpenResty初涉
关于openresty可参考官方文档: http://openresty.org/cn/download.html 1.这个是什么? 在互联网公司,Nginx可以说是标配组件,但是主要场景还是负载均衡 ...
- 我是大SB
哈哈哈 我就是个大SB!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
- select、poll和epoll多路I/O复用
一.三者的区别 select select最早于1983年出现在4.2BSD中,它通过一个select()系统调用来监视多个文件描述符的数组,当select()返回后,该数组中就绪的文件描述符便会被 ...
- python的StringIO模块
StringIO经常被用来作字符串的缓存,因为StringIO的一些接口和文件操作是一致的,也就是说同样的代码,可以同时当成文件操作或者StringIO操作. 一.StringIO中的常用方法 1.r ...
- 二叉树系列 - 求两节点的最低公共祖先,例 剑指Offer 50
前言 本篇是对二叉树系列中求最低公共祖先类题目的讨论. 题目 对于给定二叉树,输入两个树节点,求它们的最低公共祖先. 思考:这其实并不单单是一道题目,解题的过程中,要先弄清楚这棵二叉树有没有一些特殊的 ...
- CSS3方法总汇
PS:CSS3的3D和我做研发时的3D不一样他们只能旋转180度 横为X竖为Z高为Y transfrom:2D3D转换 rotareX:绕着X轴旋转 rotareY(-180deg):绕着Y轴旋转- ...
- 2017-2018-2 20179207 《网络攻防技术》第十三周作业 python3实现SM234算法
国密算法SM234 的python3实现 国家标准 GM/T 0002-2012 <SM4分组密码算法> GM/T 0003.1-2012 <SM2椭圆曲线公钥密码算法 第1部分:总 ...
- 数学:Nim游戏和SG函数
有若干堆石子,两人轮流从中取石子,取走最后一个石子的人为胜利者 以下的性质是显然的 .无法移动的状态是必败态 .可以移动到必败态的局面一定是非必败态 .在必败态做所有操作的结果都是非必败态 在普通Ni ...
- HDU 1812 polya 大数
由于反射的存在,分奇偶讨论其置换的循环节数量,大数用JAVA就好了. import java.math.*; import java.util.*; public class Main{ public ...
- 816E. Karen and Supermarket 树形DP
LINK 题意:给出n个商品,除第一个商品外,所有商品可以选择使用优惠券,但要求其前驱商品已被购买,问消费k以下能买几个不同的商品 思路:题意很明显就是树形DP.对于一个商品有三种选择,买且使用优惠券 ...