有一个需求是这样的:

父元素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的更多相关文章

  1. Js 事件委托 解决动态元素不能click点击的问题

    参考教程地址 https://blog.csdn.net/xiaolong20081/article/details/79792137 不想写了.直接看上面就行 采用事件委托或代理方式绑定 $(doc ...

  2. JS与Jquery的事件委托——解决了绑定相同事件的问题

    概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完 ...

  3. 【转】利用匿名namespace解决C++中重复定义的问题

    目录 利用匿名namespace解决C++中重复定义的问题 原文:https://blog.csdn.net/pi9nc/article/details/11267031 利用匿名namespace解 ...

  4. JS:事件委托

    事件委托 事件流 事件流描述的是从页面中接收事件的顺序.---JS高级程序设计(第3版) DOM Level 2 Events规定的事件流有三个阶段:①事件捕获阶段.②处于目标阶段.③事件冒泡阶段 事 ...

  5. Js - JQ事件委托( 适用于给动态生成的脚本元素添加事件)

    最近一段时间打了一个大仗,现在总算消停点,才有时间来做个总结吧算是: 移动端遇到一个项目,是一个列表的侧滑栏,在我这里用jq写的交互事件.自测各方面都挺好的,美滋滋的给了研发.研发也美滋滋的开始开发. ...

  6. JS 的事件委托机制

    以前写上图所示的鼠标点击触发事件,一般都是用如下所示的给每一个表示列表的标签绑定一个click事件(演示用的例子的框架是React): 毫无疑问,这样是比较繁琐的,以后维护修改改个函数名什么的还不方便 ...

  7. js的事件委托

    什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事 ...

  8. 浅谈利用同步机制解决Java中的线程安全问题

    我们知道大多数程序都不会是单线程程序,单线程程序的功能非常有限,我们假设一下所有的程序都是单线程程序,那么会带来怎样的结果呢?假如淘宝是单线程程序,一直都只能一个一个用户去访问,你要在网上买东西还得等 ...

  9. js的事件委托机制

    如今的JavaScript技术界里最火热的一项技术应该是‘事件委托(event delegation)’了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们的父 ...

随机推荐

  1. linux sort中文失效问题的解决

    http://note.youdao.com/noteshare?id=745488efb61a69fb56475e291863c94e

  2. python中如何优雅续行和换行

    http://note.youdao.com/noteshare?id=8dbcb93991a89a6cfcd95580ed2198f0

  3. WPF系列之二:解耦View层控件事件与ViewModel层事件的响应

    以前的做法: 1.当项目的时间比较紧迫的时候,对UI层中控件的事件的处理,往往采取的是类似Winform中最简单的做法,直接做一个事件的Handler直接去调用VM层的方法. 2.控件只有一个Comm ...

  4. 排序构造 GYM 101149 F - The Weakest Sith

    题目链接:http://codeforces.com/gym/101149/my 题目大意:给你n个人,他们有成绩a,b,c.一个人如果两门课比另外一个人高,那么这个人就比那个人厉害.问,是否存在一个 ...

  5. 【BZOJ】2142 礼物

    [算法]中国剩余定理 [题意]给定n件物品分给m个人,每人分到wi件,求方案数%p.p不一定是素数. [题解] 首先考虑n全排列然后按wi划分成m份,然后对于每份内都是全排列,除以wi!消除标号影响, ...

  6. 【BZOJ】2049: [Sdoi2008]Cave 洞穴勘测 LCT

    [题意]给定n个点和m个操作,每次操作:1.连接2个点.2.断开2个点.3.查询2个点是否连通.m<=2*10^5. [算法]Link-Cut Tree [题解]LCT模板题,Link,Cut, ...

  7. Spring Boot中使用Spring-data-jpa让数据访问更简单、更优雅

    在上一篇Spring中使用JdbcTemplate访问数据库中介绍了一种基本的数据访问方式,结合构建RESTful API和使用Thymeleaf模板引擎渲染Web视图的内容就已经可以完成App服务端 ...

  8. 【leetcode 简单】第二十一题 相同的树

    给定两个二叉树,编写一个函数来检验它们是否相同. 如果两个树在结构上相同,并且节点具有相同的值,则认为它们是相同的. 示例 1: 输入: 1 1 / \ / \ 2 3 2 3 [1,2,3], [1 ...

  9. discuz2.5登录后台闪退的解决办法

    今天突然发现discuz2.5论坛后台进不去,开始以为密码错了,但发现登录后也是闪退.我试着清除浏览器cookie,也换了其他浏览器也没有用,还是上网找找吧! discuz2.5进入后台闪退的原因: ...

  10. .ui/qrc文件自动生成.py文件

    前天PL让我们做一个从手机里手机一些数据导出到excel文件里的Tool. 让我们用python去写一个.但是我们都没有学过python..呵呵! 然后昨天看了一些文档.做ui时还需要把图片写入qrc ...