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

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

在jQuery时代，这个非常常见

1 2 3

$( document ).bind("click", function( e ) {     $( e.target ).closest("li").toggleClass("hilight"); });

closest() 方法

需要获取点击、拖动等 （click/mouseove/dragover）触发元素的指定父元素，告别jquer还真的麻烦。但是closest() 真香！

这个方法会从当前元素开始，遍历 DOM 树，并且返回和给定参数匹配的最近的祖先

1 2 3

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