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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/427557.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

带孩子们做环球旅行的读后感_父母带孩子做心理咨询,需要注意哪些事项?

最近&#xff0c;带孩子来做心理咨询的父母接踵而至&#xff0c;但是很多时候&#xff0c;父母可能无意识会有一些影响心理咨询与治疗的效果的行为&#xff0c;对于他们来说&#xff0c;可能需要注意这几点&#xff1a;1、守时心理咨询需要精力与时间&#xff0c;一般咨询师为了…

OpenCV函数cvFindContours

提取轮廓在OpenCV里有一个函数 cvFindContours&#xff1a;int cvFindContours( CvArr* image, CvMemStorage* storage, CvSeq** first_contour,int header_sizesizeof(CvContour),int modeCV_RETR_LIST,int methodCV_CHAIN_APPROX_SIMPLE, CvPoint offsetcvPoint(0,0) );这个函…

table tr th td

控制th 宽度相同&#xff1a; table{display: -webkit-box;table-layout:fixed; border: none;max-width:120%;min-width:100%;} table tbody tr th{ width:200px !important; border:1px solid #333;} td{border:1px solid #333;}控制 俩行变为一行 &#xff1a; colspan"…

消息队列控制灯代码_代码实现RabbitMQ死信队列的创建

‍‍前言&#xff1a;‍‍之前有写过死信队列的使用场景以及通过管控台创建死信。这次就通过代码实现死信队列的创建&#xff0c;同时也分享一下RabbitMQ封装的类。准备&#xff1a;1. 先准备一个死信队列(最后用来消费)的参数配置&#xff0c;包括虚拟机&#xff0c;交换机&am…

Deep Learning(深度学习)

Deep Learning&#xff08;深度学习&#xff09;ufldl的2个教程(这个没得说&#xff0c;入门绝对的好教程&#xff0c;Ng的&#xff0c;逻辑清晰有练习)&#xff1a;一ufldl的2个教程(这个没得说&#xff0c;入门绝对的好教程&#xff0c;Ng的&#xff0c;逻辑清晰有练习)&…

0.Boot Loader的概念和功能

转载&#xff1a;http://blog.chinaunix.net/uid-20543672-id-94371.html 1、嵌入式Linux软件结构与分布 在一般情况下嵌入式Linux系统中的软件主要分为以下及部分&#xff1a; &#xff08;1&#xff09;引导加载程序&#xff1a;其中包括内部ROM中的固化启动代码和Boot Loade…

平板电脑可以插u盘吗_电视TV盒子安装app的六个方法,u盘/电脑/手机都可以安装...

点击上方蓝字 关注我们首先&#xff0c;要看盒子是否支持安装第三方app&#xff0c;这期只讲支持第三方app安装的安卓系统盒子&#xff0c;iOS盒子不讲。怎么看电视盒子能不能安装第三方&#xff1f;很简单&#xff0c;方法很多&#xff0c;最常见就是用装有apk文件的u盘连接盒…

IT人士必去的10个网站

1、Chinaunix 网址&#xff1a;http://www.chinaunix.net/ 简介&#xff1a;中国最大的linux/unix技术社区。 2、ITPub 网址&#xff1a;http://www.itpub.net/ 简介&#xff1a;有名气的IT技术论坛&#xff0c;看看它的alexa排名就知道有多火了&#xff0c;尤其以数据库技术讨…

drive es 软件兼容_某知名软件被完美修改!对不住了!

⭐星标Or 置顶⭐右上角三点-设为星标(置顶)今天给大家介绍两款超好用的免费神器&#xff01;支持&#xff0c;请点亮文章底部“在看” ?搜图神器绿化版安卓 / 9M这是一款装机必备的搜图应用&#xff0c;支持图片搜索&#xff0c;百度识图&#xff0c;谷歌识图&#xff0c;拍照…

OpenCv学习笔记(二)—cv Mat学习

由于在写上一篇图像的数据结构时&#xff0c;发现自己只知道CvMat,竟然还有Mat数据结构&#xff0c;真是无知了&#xff0c;看了这么多程序&#xff0c;貌似没有看到这个结构。有可能那些程序都是些老版本的例子&#xff0c;这是在2.0以后加上的&#xff0c;所以我也得紧跟呀&a…

5g pdu session_运营商下架4G套餐,用户被5G!

近日&#xff0c;网上突然出现诸多报道&#xff0c;称三大运营商为了推广5G套餐&#xff0c;开始下架4G套餐&#xff0c;用户办理套餐时只能选择价格相对较高的5G套餐。看到这些报道很多网友坐不住了&#xff0c;这难道要倒逼用户改用5G吗&#xff1f;要知道&#xff0c;三大运…

oracle 取前10条记录

--oracle取前十条数据 --(1)第一种 select * from t_base_employee where rownum < 11;--(2)第二种 select *from (select * from t_base_employee t order by t.modify_time desc)where rownum < 10; 转载于:https://www.cnblogs.com/feifeicui/p/9244568.html

OpenCV图像处理形态学操作腐蚀Erode与膨胀Dilate

通俗的说&#xff1a;膨胀算法使图像扩大一圈。腐蚀算法使二值图像减小一圈。腐蚀&#xff1a;删除对象边界的某些像素膨胀&#xff1a;给图像中的对象边界添加像素算法&#xff1a;从图像处理角度看&#xff0c;二值图像的腐蚀和膨胀就是将一个小型二值图&#xff08;结构元素…

台达asda-b2伺服驱动器说明书_台达解决方案提升粉末冶金液压机的控制精度

项目背景粉末冶金液压机是一种利用液体压力来传递能量&#xff0c;实现各种压力加工工艺的机床&#xff0c;适用于各种金属及非金属粉末的压制成形&#xff0c;如铁基、铜基、钨、钛、锰、硼等。某生产企业所应用的粉末冶金液压机采用以台达油电伺服驱动器VFD-VJ系列为核心的控…

hadoop中map和reduce的数量设置问题

转载http://my.oschina.net/Chanthon/blog/150500 map和reduce是hadoop的核心功能&#xff0c;hadoop正是通过多个map和reduce的并行运行来实现任务的分布式并行计算&#xff0c;从这个观点来看&#xff0c;如果将map和reduce的数量设置为1&#xff0c;那么用户的任务就没有并行…

shell变量里的字符替换

shell变量里的字符替换b${a/123/321};将${a}里的第一个123替换为321b${a//123/321};将${a}里的所有123替换为321shell调试:sh -x aaa.shfrom:http://bbs.chinaunix.net/viewthread.php?tid218853&extra&page7#pid1628522shell十三问不過&#xff0c;假如你只看到 ${ }…

常州win8如何禁用应用商店_Win8系统当中Windows defnedder安全软件应该如何禁用?...

Win8系统如何禁用defender&#xff1f;Windows defender安全软件但是win8系统自带的&#xff0c;但有时该软件也会与其他软件发生冲突&#xff0c;那么这个时候应该如何禁用Windows defender安全软件呢&#xff1f;接下来就为大家分享win8系统禁用defender的操作方法。操作方法…

Django 的工程创建

1.环境安装 1. 创建虚拟环境 mkvirtualenv django_py3_1.11 -p python3注意需要联网 2. 安装Django 使用django 1.11.11版本&#xff0c;注意需要联网 pip install django1.11.113. 复习虚拟环境和pip的命令 # 虚拟环境 mkvirtualenv # 创建虚拟环境 rmvirtualenv # 删除虚拟…

python提取网页中p标签中的内容_使用Python进行爬虫的初学者指南

前言爬虫是一种从网站上抓取大量数据的自动化方法。即使是复制和粘贴你喜欢的网站上的引用或行&#xff0c;也是一种web抓取的形式。大多数网站不允许你保存他们网站上的数据供你使用。因此&#xff0c;唯一的选择是手动复制数据&#xff0c;这将消耗大量时间&#xff0c;甚至可…

OpenCv的连通域操作

由于项目需要&#xff0c;要对图像中的最大连通域进行标定&#xff0c;并且存储。首先需要使用cvFindCountour对边缘进行标定&#xff0c;其实它的原理就是连通域的边缘提取&#xff1b;其次就是对连通域进行大小判断找出最大的连通域&#xff1b;最后当然就是进行Rect并且ROI了…