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)’了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们的父 ...
随机推荐
- C++中添加配置文件读写方法
比如有一个工程,一些变量有可能需要不时的修改,这时候可以通过从配置文件中读取该数值,需要修改时只需要修改配位文件即可. 比如有一个这样的变量m_nTest; 我么可以写两个函数ReadConfig() ...
- 2018-2019 ACM-ICPC 焦作赛区 部分题解
题目链接:https://codeforces.com/gym/102028 B. Ultraman vs. Aodzilla and Bodzilla 题意: 两只怪兽,它们的生命和攻击分别为hpA ...
- Centos7中使用ipset
1.禁用firewalld systemctl stop firewalld systemctl disable firewalld 2.安装ipset yum -y install ipse ...
- spring boot 2.0.3+spring cloud (Finchley)7、服务链路追踪Spring Cloud Sleuth
参考:Spring Cloud(十二):分布式链路跟踪 Sleuth 与 Zipkin[Finchley 版] Spring Cloud Sleuth 是Spring Cloud的一个组件,主要功能是 ...
- poj 3164 Command Network(最小树形图模板)
Command Network http://poj.org/problem?id=3164 Time Limit: 1000MS Memory Limit: 131072K Total Subm ...
- HDU 1333 基础数论 暴力
定义一种数位simth数,该数的各位之和等于其所有质因子所有位数字之和,现给出n求大于n的最小该种数,n最大不超过8位,那么直接暴力就可以了. /** @Date : 2017-09-08 14:12 ...
- [Luogu 1196] NOI2002 银河英雄传说
[Luogu 1196] NOI2002 银河英雄传说 话说十六年前的 NOI 真简单... 我一开始还把题看错了- 题意:一群人,每个人各自成一队,每次命令让两队首位相接合成一队,每次询问问你某两个 ...
- linux 中 permission denied的问题
想在linux中运行一个脚步,却提示permission denied. 文件权限不允许. 为了获得执行权限,借助chmod指令修改文件权限即可. 1.如果是运行程序时出现此提示,一般执行chmod ...
- Uploadify & jQuery.imgAreaSelect 插件实现图片上传裁剪
在网站中需要一个图片上传裁剪的功能,借鉴这篇文章 Ajax+PHP+jQuery图片截图上传 的指点,找到了jquery.imgAreaSelect这个不错插件,能对图片进行自定义区域选择并给出坐标, ...
- 【HDU】6110 路径交(2017百度之星) 线段树+RMQ-LCA+树链的交
[题目]2017"百度之星"程序设计大赛 - 初赛(A) [题意]给定n个点的带边权树,m条编号1~m的路径,Q次询问编号区间[L,R]所有链的交集的长度.n<=500000 ...