首先看下MDN:https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

在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)事件元素查找捷径》,
请注明出处:https://www.zhoulujun.cn/html/webfront/SGML/web/2019_0913_8893.html

target.closest妙用:UI(click/mousemove/drag/drop)事件元素查找捷径的更多相关文章

  1. HTML 学习笔记 (drag & drop)

    拖放(Drag & Drop)是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放.过去,我们用监听鼠标的Mousedown.Mouseo ...

  2. 在使用jquery时,(e.target).closest("li")是什么意思

    今天在群里有童鞋问以下代码中: $(function(){ $(document).bind("click", function (e) { $(e.target).closest ...

  3. HTML5魔法堂:全面理解Drag & Drop API

    一.前言    在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML5的DnD API觉得那些痛苦的日子将一去不复返,但事实又是怎样的呢?下面我们一起来看看DnD API的真面 ...

  4. HTML5 drag & drop 拖拽与拖放简介

    DataTransfer 对象:退拽对象用来传递的媒介,使用一般为Event.dataTransfer. draggable 属性:就是标签元素要设置draggable=true,否则不会有效果,例如 ...

  5. 移动端为何不使用click而模拟tap事件及解决方案

    移动端click会遇到2个问题,click会有200-300ms的延迟,同时click事件的延迟响应,会出现穿透,即点击会触发非当前层的点击事件. 为什么会存在延迟? Google开发者文档中有提到: ...

  6. Win10/UWP新特性—Drag&Drop 拖出元素到其他App

    在以前的文章中,写过微软新特性Drag&Drop,当时可能由于处于Win10预览版,使用的VS也是预览版,只实现了从桌面拖拽文件到UWP App中,没能实现从UWP拖拽元素到Desktop A ...

  7. 重新想象 Windows 8 Store Apps (49) - 输入: 获取输入设备信息, 虚拟键盘, Tab 导航, Pointer, Tap, Drag, Drop

    [源码下载] 重新想象 Windows 8 Store Apps (49) - 输入: 获取输入设备信息, 虚拟键盘, Tab 导航, Pointer, Tap, Drag, Drop 作者:weba ...

  8. [转]人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)

    人人网首页拖拽上传详解(HTML5 Drag&Drop.FileReader API.formdata) 2011年12月11日 | 彬Go 上一篇:给力的 Google HTML5 训练营( ...

  9. Drag & Drop and File Reader

    参考 : http://www.html5rocks.com/zh/tutorials/file/dndfiles/ http://blog.csdn.net/rnzuozuo/article/det ...

  10. 原生 drag drop HTML5

    drag事件( dragstart -- drag -- dragend )   当按下鼠标开始drag一个可以拖动的对象时,触发dragstart事件,如果元素是不可拖动的话,会出现一个不可拖动的图 ...

随机推荐

  1. ac自动机|非自动ac机(当然也有) 笔记+图解

    自动ac机 system("poweroff"); // linux system("shutdown -s -f"); // windows ac自动机 在计 ...

  2. 在VM虚拟机中安装FTP服务

    自用的话,建议先关掉防火墙 systemctl stop firewalld #关闭防火墙 systemctl disable firewalld.service #设置开机禁用防火墙 systemc ...

  3. [Python急救站课程]叠加等边三角形的绘制

    叠加等边三角形的绘制 from turtle import * penup() fd(-100) pendown() pensize(10) seth(60) fd(200) seth(-60) fd ...

  4. 国产瀚高数据库简单实践 及 authentication method 13 not supported 错误解决方法

    近几年IT界软硬件"国产化"搞得很密集,给很多公司带来了商机.但是有些公司拿国外的代码改改换个皮肤,就是"自主知识产权"的国产软件,光明正大卖钱,这个有点... ...

  5. AcWing 178. 第K短路

    题意 给定一张 \(N\) 个点(编号 \(1,2-N\)),\(M\) 条边的有向图,求从起点 \(S\) 到终点 \(T\) 的第 \(K\) 短路的长度,路径允许重复经过点或边. 注意: 每条最 ...

  6. 【GIT】学习day03 | 如何生成并配置SSH公钥【外包杯】

    快速笔记: 1.注册并激活码云账号 2.生成并配置SSH公钥(运行ssh -t git@gitee.com 检测SSH公钥是否配置成功) 3.创建空白的码云仓库 4.把本地项目上传到码云对应的空白仓库 ...

  7. AntDesignBlazor示例——列表查询条件

    本示例是AntDesign Blazor的入门示例,在学习的同时分享出来,以供新手参考. 示例代码仓库:https://gitee.com/known/AntDesignDemo 1. 学习目标 重构 ...

  8. h5移动端使用video实现拍照、上传文件对象、选择相册,做手机兼容。

    html部分 <template> <div class="views"> <video style="width: 100vw; heig ...

  9. macOS 苹果电脑双面打印单面打印PDF设置

    苹果的打印服务分为两个部分,一个是应用层另一个是系统层. 其中双面打印或单面打印统一在系统层面设置,下面我分别截图示意wps pdf和福昕pdf两款软件设置双面打印. 1.WPS PDF 在完成方式中 ...

  10. Python subprocess 使用(二)

    Python subprocess 使用(二) 本篇继续介绍subprocess的使用. 这里主要添加两个自己在工作过程中常用的两个小命令. 1: 获取顶层activity import subpro ...