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)’了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们的父 ...
随机推荐
- UVA-11582 数学
UVA-11582 题意: 求f[a^b]%n ,其中f是斐波那契数列,1<=n<=1000,0<=a,b<=2^64; 代码: //这题重点是要发现 f[i]%n会出现循环, ...
- Linux常用网络工具:fping主机扫描
Linux下有很多强大网络扫描工具,网络扫描工具可以分为:主机扫描.主机服务扫描.路由扫描等. fping是一个主机扫描工具,相比于ping工具可以批量扫描主机. fping官方网站:http://f ...
- Splay 区间操作(二)
首先基本操作如下: 删除第rank个点 void Remove(int id){//删除第rank个点 rank++; int x = find(root, rank - 1); splay(x, 0 ...
- phpstrom+xdebug+chrome+postman调试工具搭建
php是解释性语言,大部分调试的时候使用var_dump+exit就可以搞定了,但是在大项目或遇到了负载的问题的时候你就需要断点调试.变量打印.性能分析了,php也有非常程序的解决方案,我们现在就动手 ...
- Vue.js随笔一(Webpack + Vue.js开发准备,含VNM、NPM、Node、Webpack等相关工具)
想入门工具是必须的,这一章将向大家带来vue.js相关的程序安装步骤. ①首先你需要有一个NVM(一个非常好用的Node版本管理器): 1.NVM下载地址:https://github.com/cor ...
- Android 菜单和上下文演示
在Action添加个TextView控件(上下文演示用); package com.example.test; import android.app.Activity;import android.o ...
- 【BZOJ】1426: 收集邮票 期望DP
[题意]有n种不同的邮票,第i次可以花i元等概率购买到一种邮票,求集齐n种邮票的期望代价.n<=10^4. [算法]期望DP [题解]首先设g[i]表示已拥有i张邮票集齐的期望购买次数,根据全期 ...
- 垂直水平居中--css3
在移动前端制作中,很多新的css3特性能够帮助我们更好的制作.例如这个垂直水平居中问题,就有一个简单的代码可以解决: 利用CSS3的transform:translate .center{ width ...
- 从python入门ruby
1.Ruby的函数可以不使用括号 def h(name) puts "hello #{name}" end h "jack" 2.python可以直接访问实例的 ...
- Sublime之插件的安装(三)
今天在写js的时候,突然想到一个问题就是能不能快速的对齐的插件,当当当~~~sublime这么神器当然有,那就是:Alignment插件 如果你写的代码是这样的: var a = , b =, ccc ...