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标签作为最内里的标签,不能嵌套别的标签,比如百度 这种情况就会失效。
3. 最终实现方案:

document.addEventListener('click', function (event) {
    const aLink = event.target.closest('a');
    if (aLink) {
        event.preventDefault();
        window.open(aLink.href, '_self')
    }
});

你可能感兴趣的:(JavaScript,javascript)