js closest 实现

实现 closest 方法

closest 是 DOM 元素的一个方法，用于查找与当前元素匹配的选择器的最接近的祖先元素。如果原生不支持 closest，可以通过以下代码实现：

function closest(element, selector) {
  if (Element.prototype.closest) {
    return element.closest(selector);
  }

  let el = element;
  while (el) {
    if (matchesSelector(el, selector)) {
      return el;
    }
    el = el.parentElement;
  }
  return null;
}

function matchesSelector(el, selector) {
  const matches = el.matches || el.webkitMatchesSelector || el.msMatchesSelector;
  return matches.call(el, selector);
}

使用方法

调用 closest 函数时传入目标元素和选择器：

const element = document.querySelector('.child');
const closestParent = closest(element, '.parent');
console.log(closestParent);

兼容性处理

该实现首先检查浏览器是否原生支持 closest，如果不支持则手动向上遍历 DOM 树，直到找到匹配的元素或到达根元素。

注意事项

• 确保传入的 element 是有效的 DOM 元素。
• 选择器语法需符合标准 CSS 选择器规范。
• 在不支持 matches 的旧浏览器中，需使用对应的前缀方法（如 webkitMatchesSelector）。