2025年closest的用法

closest的用法1 closest 的概念 Element closest 是一个 DOM 文档对象模型 方法 用于从当前元素开始 沿着 DOM 树向上遍历 直到找到匹配指定选择器的第一个元素 如果没有找到匹配的元素 则返回 null 2 closest 的使用场景 需求描述

大家好,我是讯享网,很高兴认识大家。

1. closest的概念

Element.closest() 是一个DOM(文档对象模型)方法,用于从当前元素开始,沿着DOM树向上遍历,直到找到匹配指定选择器的第一个元素。如果没有找到匹配的元素,则返回 null。


讯享网

2. closest的使用场景

  1. 需求描述:对于一个已经写好的网站,网站中所有的a标签点击的时候都是以新的tab页的方式打开,但是目前期望所有的都以在当前页面的方式打开。
  2. 初步实现:
document.addEventListener('click', function (event) { 
    const aLink = event.target; if (aLink.tagName === 'A') { 
    event.preventDefault(); window.open(aLink.href, '_self') } }); 

讯享网

但是自测发现这种情况只适用于 <a href="https://www.baidu.com/" target="_blank">百度</a> 这种a标签作为最内里的标签,不能嵌套别的标签,比如<a href="https://www.baidu.com/" target="_blank"><span>百度</span></a> 这种情况就会失效。
3. 最终实现方案:

讯享网document.addEventListener('click', function (event) { 
    const aLink = event.target.closest('a'); if (aLink) { 
    event.preventDefault(); window.open(aLink.href, '_self') } }); 
小讯
上一篇 2025-03-02 07:07
下一篇 2025-01-27 17:54

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请联系我们,一经查实,本站将立刻删除。
如需转载请保留出处:https://51itzy.com/kjqy/71786.html