有一个需求是这样的:

父元素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. 2017中国大学生程序设计竞赛 - 女生专场 1002 dp

    Building Shops Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) ...

  2. 中南多校对抗赛 第三场 E

    E:Eulerian Flight Tour 题意: 给你一张无向图,要你给这个图加边使得其形成一个欧拉回路 题解: 首先使得所有节点的度都为偶数,然后将这个图联通起来 对于度为奇数的点,将将他和他的 ...

  3. Python基础之面向对象(初级篇)

    概述 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象:对函数进行分类和封装,让开发“更快更好更强...” 面向过程编程最易被初学 ...

  4. 「Python」字符串操作内置函数

    目录: capitalize casefold center count encode decode endswith expandtabs find format format_map index ...

  5. myeclipse注册机,自己生成注册码

    话不多少,直接上代码 直接可以运行,自己输入key即可 package com.generate.myeclipse.code; import java.io.BufferedReader; impo ...

  6. BZOJ2588:LCA+主席树来实现树上两点之间第K大点权查询

    对于每个节点维护这个节点到根的权值线段树 对于每个询问(x,y),这条路径上的线段树 tree[x]+tree[y]-tree[lca(x,y)]-tree[fa[lca(x,y)]] #includ ...

  7. 「七天自制PHP框架」应用:Model外键链接

    这里以行政区数据为例: 一级行政区数据范例: 二级行政区范例: 三级行政区范例: 在Model层建立三个Model class ProvinceModel extends Model{ public ...

  8. 135.Candy---贪心

    题目链接 题目大意:分糖果,每个小朋友都有一个ratings值,且每个小朋友至少都要有一个糖果,而且每个小朋友的ratings值如果比左右邻舍的小朋友的ratings值高,则其糖果数量也比邻舍的小朋友 ...

  9. docker简单介绍(资料收集总结)

    [前言] 首先,感谢我的leader总是会问我很多技术的基本资料,让我这个本来对于各种技术只知道操作命令不关注理论知识的人,开始重视理论资料. 关于docker的操作步骤等等,都是之前学习的,现在补上 ...

  10. 简约而不简单的Django

    本文面向:有python基础,刚接触web框架的初学者. 环境:windows7   python3.5.1  pycharm专业版  Django 1.10版 pip3 一.Django简介 百度百 ...