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)’了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们的父 ...
随机推荐
- Codeforces Round #338 (Div. 2) B dp
B. Longtail Hedgehog time limit per test 3 seconds memory limit per test 256 megabytes input standar ...
- std::sort运行出core(segment fault)
http://note.youdao.com/noteshare?id=6aae09345e85ab55fe24ac959118a747
- python使用pwd和grp操作unix用户及用户组
1.pwd模块 pwd模块提供了一个unix密码数据库即/etc/passwd的操作接口,这个数据库包含本地机器用户帐户信息 常用操作如下: pwd.getpwuid(uid):返回对应uid的示例信 ...
- 第2章-Vue.js指令
一.学习目标 了解 什么 是 Vue.js 指令 理解 Vue.js 指令的 用途 掌握 Vue.js 指令的书写规范 能够 使用 Vue.js 指令完成部门页面交互效果(难点和重点) 二.指令的基本 ...
- 【NOI2017】游戏 2-sat算法
[题目]LibreOJ [题意]n场游戏,有三种车ABC,给定长度为n的字符串,'a'表示不能选A,'b''c'同理,'x'表示不限,至多d个'x'.有m个限制(i,hi,j,hj)表示如果第i场选择 ...
- 【CodeForces】679 A. Bear and Prime 100
[题目]A. Bear and Prime 100 [题意]有一数字x,每次可询问一个数字y是否x的因子,最后输出数字x是否素数,要求询问次数<=20. [题解]容易发现[2,100]范围内的非 ...
- 用java代码在创建hbase表时指定region的范围
package com.liveyc.common.utils; import java.util.List; import org.apache.hadoop.hbase.util.Bytes; i ...
- Java读取大文件的高效率实现
1.概述 本教程将演示如何用Java高效地读取大文件.这篇文章是Baeldung (http://www.baeldung.com/) 上“Java——回归基础”系列教程的一部分. 2.在内存中读取 ...
- idea docker 连接 linux 上的 docker
安装插件 Docker插件,首先需要在你的IDEA中安装Docker插件,定位到File-Setting-Plugins后搜索Docker Integration安装 配置Docker服务器,在IDE ...
- NEO发行资产Token
NEO注册发行全局资产(Token 和 Share)功能已经在neo-gui里面集成,发行非常方便, 高级-注册资产 注册Token消耗GAS感人 4990 Gas 点击调用,获取交易ID为资产ID ...