掌握 closest() 函数，高效获取 DOM 元素

2024-01-10 17:45:28

在垂直导航菜单中使用 closest() 函数触发 JavaScript 代码

在构建用户界面时，垂直导航菜单是一种常见的元素。它可以帮助用户轻松浏览网站或应用程序的各个部分。当用户点击菜单项时，我们通常需要触发某些 JavaScript 代码来执行特定的动作。然而，有时我们可能会遇到点击菜单项时代码无法触发的令人沮丧的问题。

问题：点击菜单项时 JavaScript 代码未触发

想象一下这样的场景：你有一个垂直导航菜单，其中每个菜单项包含一个图标和一个 <span> 元素，用于显示标签。当用户点击图标时，你希望触发一个 JavaScript 函数。但不知何故，无论你如何努力，函数就是没有被调用。

经过一番深入调查，你发现问题出在事件处理程序上。你最初在图标元素上添加了事件监听器，但由于图标元素本身不可点击，因此事件监听器无效。

解决方案：使用 closest() 函数

为了解决这个问题，我们需要找到一种方法来定位菜单项元素，而不仅仅是图标元素。这就是 closest() 函数的用武之地。closest() 函数允许我们向上遍历 DOM 树，直到找到第一个与指定选择器匹配的祖先元素。

在我们的情况下，我们要匹配菜单项元素。所以，我们可以在图标元素上使用 closest() 函数来获取其父元素，也就是菜单项元素。然后，我们可以在菜单项元素上添加事件监听器，这样当用户点击图标时，事件监听器就会被触发。

使用 closest() 函数的代码示例

以下代码示例演示了如何使用 closest() 函数在点击图标时触发 JavaScript 代码：

const menuItems = document.querySelectorAll('.menu-item');

menuItems.forEach((menuItem) => {
  menuItem.addEventListener('click', (event) => {
    const icon = event.target.closest('.icon');
    if (icon) {
      // 触发 JavaScript 函数
    }
  });
});