target.closest妙用：UI(click/mousemove/drag/drop)事件元素查找捷径
创始人
2025-05-30 13:40:56
0次
首先看下MDN：Element.closest() - Web APIs | MDN
在jQuery时代，这个非常常见
$( document ).bind("click", function( e ) {$( e.target ).closest("li").toggleClass("hilight");
});
closest() 方法
需要获取点击、拖动等 （click/mouseove/dragover）触发元素的指定父元素，告别jquer还真的麻烦。但是closest() 真香！
这个方法会从当前元素开始，遍历 DOM 树，并且返回和给定参数匹配的最近的祖先
function closest(Element,selector){return Element.closest(selector);
}
不过需要注意的是
e.target与e.currentTarget的区别：
-
e.target 指向的是触发事件监听的对象（事件源）。
-
e.currentTarget 指向添加监听事件的对象（绑定事件的dom元素）。
转载本站文章《target.closest妙用：UI(click/mousemove/drag/drop)事件元素查找捷径》,
请注明出处：target.closest妙用：UI(click/mousemove/drag/drop)事件元素查找捷径 - Standard Generalized Markup langu - 周陆军的个人网站
上一篇：朴素贝叶斯学习报告
下一篇：Java二叉树的前中后序遍历
相关内容
热门资讯
springboot控制层消息...
大概了解三种方式： 1.区别在于WebMvcConfigurerAdapter 新版本...
2023年湖北安全员ABC证书...
2023年湖北安全员ABC证书报名入口！报考条件？启程别 证...
蓝桥杯倒计时 | 倒计时18天
作者🕵️♂️：让机器理解语言か 专栏🎇：...
pandas读CSV、读JSO...
学习让我快乐 pandas的数据读取基本操作 pandas是Python中非常流行的数据处理库...
Hybrid App开发模式
Hybrid App（混合模式移动应用）是指介于web-app、nati...
SQL预编译和批量提交对性能提...
背景 一个项目，从kafka获取数据后，经过业务处理，生成...
C++ Lambda表达式的常...
⭐️我叫忆_恒心，一名喜欢书写博客的在读研究生👨🎓。...
【总结】docker 安装教程
各操作系统版本下载地址 mac 版：https://download.docker.c...
12 致远OA开发规范
开发案例(业务扩展接口) 1.客开开发前缀约束： 为了快速区分标准开发与客开开发&#x...
文件包含漏洞全面详解
文件包含漏洞总结一、什么是文件包含漏洞二、本地文件包含漏洞(LFI)三、LFI漏洞利用技巧1.配合文...
【Linux】学会这些基本指令...
前言上篇文章介绍了一些常用的指令，这篇文章再来介绍一下Linux必须学会的指令。一.时...
panbas学习篇（一）数据的...
最大值最小值 Series.sum : Return the sum.Series.min : Re...
西安石油大学期末C语言重点题目...
C语言重点知识点总结 ##例题4-7 （switch和字符的读入） ...
QML- QML视觉元素类型
QML视觉元素类型一、概述一、图像类型三、共享视觉属性1. 不透明度和可见性2. 转换（...
【 Linux入门 】之 手搓...
目的基本结构提取输入命令fgets的使用命令初步处理命令的本质创建子进程重要知识补充进程替换命令处理...
Redisant Toolbo...
Redisant Toolbox——面向开发者的多合一工具箱 Redisant Toolbox 拥有...
数字化浪潮中，我们的位置在哪里...
在数字化浪潮中，我们的位置在哪里？ 不谋全局，不足谋一域 ...
Java每日一练(202303...
目录 1. 出现次数最多的字符 🌟 2. 最后一个单词的长度 🌟...
网络作业3【计算机网络】
网络作业3【计算机网络】前言推荐网络作业3一. 单选题（共3题，3分&#...
HTML 图像
文章目录 HTML 图像HTML 图像- 图像标签（ \）和源属性（Src）HTML 图像- Alt...