target.closest妙用：UI(click/mousemove/drag/drop)事件元素查找捷径

最新推荐文章于 2024-05-01 22:13:13 发布

周陆军的个人博客

最新推荐文章于 2024-05-01 22:13:13 发布

阅读量299

点赞数

文章标签： ui javascript 前端

本文链接：https://blog.csdn.net/u012244479/article/details/129635124

版权

首先看下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 - 周陆军的个人网站

优惠劵

周陆军的个人博客

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
target.closest妙用：UI(click/mousemove/drag/drop)事件元素查找捷径

在jQuery时代，这个非常常见});
复制链接

扫一扫

jquery-closest-element:一个 jQuery 插件，用于查找最接近给定坐标的元素

06-15

jquery-最近元素一个 jQuery 插件，用于查找最接近给定坐标的元素。还有很多工作要做，基本用法： $.closestElement([xCoordinate, yCoordinate], '#selector', options); 选项：将选项哈希传递给 $.closestElement 以更改默认值。容器默认值：'身体' x重量默认值：1 描述：改变它以影响 x 距离元素的优先级。设置为 0 将仅在 y 方向找到最近的元素。 y重量默认值：1 描述：更改此项以影响 y 距离元素的优先级。设置为 0 将仅在 x 方向找到最近的元素。例子： var options = { container: '#cool-guy-div', xWeight: 1, yWeight: 2 //because this is more import

Closest_Pair.rar_人工智能/神经网络/深度学习_C/C++_

08-11

Closest-pair problem

参与评论您还未登录，请先登录后发表或查看评论

element-closest-polyfill:Element.closest的最小polyfill

05-17

元素最近填充使用MDN的实现，用于和的最小polyfill。主要用于Microsoft IE9 +。安装 $ npm install --save element-closest-polyfill 用法选择您最喜欢的： require ( "element-closest-polyfill" ) ; import 'element-closest-polyfill' ;

手动实现bind函数（附MDN提供的Polyfill方案解析）

weixin_34117211的博客

06-05

303

update: 2018-06-08 原文链接为什么要自己去实现一个bind函数？ bind()函数在 ECMA-262 第五版才被加入；它可能无法在所有浏览器上运行。所以，为了理想主义和世界和平（所有浏览器上都能随心所欲调用它），必要的时候需要我们自己去实现一个bind。那么，一个bind函数需要具备什么功能呢？ bind函数的核心...

css也可以使用变量（CSS 自定义属性）

qq_50078925的博客

02-26

1703

css也可以定义变量（CSS 自定义属性）今天无意间看到这篇文章阮一峰的网络日志——《css变量教程》，记录一下学习成果; 基础部分 –myVariable:red // 双横线- -用于声明变量 /*变量名大小写敏感 */ var(<custom-property-name> , <declaration-value>? ) // var()函数用于读取变量&nbs

原生js的e.target.closest()方法

cherry_vicent的专栏

12-05

3428

原生js的e.target.closest()方法，一个查找自身或者指定祖先元素的方法。

JS点击某特定区域外关闭当前弹框

云兮莫愁的博客

07-01

2006

<div>  <div class='crimes-penalty-title'> <div class='crimes-penalty-title2'></div> </div>  <div class='crimes-penalty-content'> </div> </di.

在使用jquery时，(e.target).closest(＂li＂)是什么意思

weixin_30432007的博客

06-25

768

今天在群里有童鞋问以下代码中： $(function(){ $(document).bind("click", function (e) { $(e.target).closest("li").css("color","red"); }) }); (e.target).closest("li")是什么意思？这里给大家稍微解释下： e.target是当...

弹窗开启以及关闭（“closest”用法）

WEB_HW

02-03

1824

代码中关键的一个用法就是closest的用法。我的理解就是“过滤”，当我我们点击屏幕中黑色的部分的时候，检测当前点击的是不是弹框的部分。也就是 target.closest(“#pop”).length == 0 。如果等于0的话就说明不是弹框区域的内容就触发关闭事件。<!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

keras 香草编码器_用香草javascript遍历dom

weixin_26736149的博客

09-09

231

keras 香草编码器If you’re new to JavaScript, you’re likely starting out with Vanilla JavaScript in order to learn the basics, and to understand how the language works at a core level, before jumping into f...

closest-package:查找最符合特定条件的package.json文件

05-02

用法closest(dir, [filter], found(err, file)) 给定一个起始目录dir ，遍历每个目录以查看其是否包含与filter函数匹配的package.json文件，例如： closest ( __dirname , function ( json , filename ) { return ...

JQuery.closest(),parent(),parents()寻找父结点

01-19

HTML代码，测试地址：jQuery 遍历 – closest() 方法 ——我粘代码上来，在页面...通过item-1查找 level-2(通过选择器查找父元素) 代码如下: $(‘li.item-1’).closest(‘.level-2’) //$(‘li.item-1’).parent(‘.le

这些DOM属性都不懂，还敢说JS基础扎实？

嘿嘿

12-02

150

“我不敢徒手撕 DOM 了” 绝大多数前端er都有这样的困扰，但本着基础为大的原则，手撕 DOM 应当是一个前端攻城狮的必备技能，这正是本文诞生的初衷 —— DOM 并没有那么难搞，如果能去充分利用它，那么你离爱上它就不远了。三年前我初入前端坑的时候，发现了一个叫做 jQuery 的宝贝，她有一个神奇的 $ 函数，可以让我快速选中某一个或一组 DOM 元素，并提供链式调用以减少代码...

$.closest()

352328759的博客

02-12

2797

返回被选元素的第一个祖先元素： $(selector).closest(filter) 返回使用 DOM context 查找的 DOM 树中的第一个祖先元素： context: 上下文, 语境, 范围 $(selector).closest(filter,context) filter 必需。规定缩小搜索祖先元素范围的选择器表达式、元素或 jQuery 对象 context 可选。在其内可以...

行内元素有哪些？块级元素有哪些？空(void)元素有那些？

田兴的博客

10-20

3933

CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。行内元素有：span a b i img input select strong 块级元素有：div p h1-h6 ul table form ul ol li dl dt dd… 空元素(没有内容)： <br> <hr> <img.

Dom操作指南

油墨香^-^的博客

08-18

277

在处理用户交互的时候，当前页面的 DOM 元素通常会发生很多变化，而有些场景需要开发者们监听这些变化并在触发后执行相应的操作。MutationObserver 是浏览器提供的一个专门用来监听 DOM 变化的接口，它强大到几乎可以观测到一个元素的所有变化，可观测的对象包括：文本的改变、子节点的添加和移除和任何元素属性的变化。在上面的代码中，我们通过调用观察者对象的 observe 方法，对 id 为 target 的 DOM 元素进行了观测（第一个参数就是需要观测的目标元素），而第二个元素，我们传入了一个。.

jquery closest用来隐藏弹出框当点击空白处

baidu_39305094的博客

12-12

339

function selectOptions() { $('.set-ul, .checkbox-ul').hide(); $('.set-btn').removeClass('set-active'); $('.select-btn').removeClass('btn-active'); } $(docume...

jQuery 遍历 - closest() 方法 is()方法

qq_27009517的博客

06-28

299

closest() 实例本例演示如何通过 closest() 完成事件委托。当被最接近的列表元素或其子后代元素被点击时，会切换黄色背景： $( document ).bind("click", function( e ) { $( e.target ).closest("li").toggleClass("hilight"); }); 亲自试一试定义和用法 closest() 方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。语法 .closest

在UI界面中播放视频_unity基础开发教程

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交