在 JavaScript 中检测元素外部的点击

Gerald Girard

2024年7月6日星期六下午6:38:47

处理菜单元素外部的点击
在 Web 开发中，尤其是在处理菜单等交互元素时，有效管理用户交互至关重要。一种常见的要求是当用户单击菜单时显示菜单，并在用户单击这些菜单之外的任何位置时隐藏菜单。这通过保持界面简洁直观来增强用户体验。
实现此功能需要一种方法来检测指定元素外部的点击。在本文中，我们将探讨如何使用 jQuery 实现此行为。我们将提供详细的示例和解释，帮助您将此功能集成到您自己的项目中。

命令描述

$(document).ready() 一种 jQuery 方法，可确保在执行任何代码之前完全加载 DOM。

$(document).click() 在 jQuery 中为文档对象上的单击事件附加一个事件处理函数。

closest() jQuery 方法查找与选择器匹配的元素的第一个祖先。

useRef() 一个 React 钩子，返回一个可变的 ref 对象以直接访问 DOM 元素。

useEffect() 用于在功能组件中执行副作用的 React hook。

addEventListener() 将事件处理程序附加到元素，而不覆盖现有的事件处理程序。

removeEventListener() 删除通过 addEventListener() 附加的事件处理程序。

contains() DOM 方法检查节点是否是给定节点的后代。

命令	描述
$(document).ready()	一种 jQuery 方法，可确保在执行任何代码之前完全加载 DOM。
$(document).click()	在 jQuery 中为文档对象上的单击事件附加一个事件处理函数。
closest()	jQuery 方法查找与选择器匹配的元素的第一个祖先。
useRef()	一个 React 钩子，返回一个可变的 ref 对象以直接访问 DOM 元素。
useEffect()	用于在功能组件中执行副作用的 React hook。
addEventListener()	将事件处理程序附加到元素，而不覆盖现有的事件处理程序。
removeEventListener()	删除通过 addEventListener() 附加的事件处理程序。
contains()	DOM 方法检查节点是否是给定节点的后代。

了解点击外部检测的实现

提供的脚本提供了使用 jQuery、Vanilla JavaScript 和 React 检测和处理指定元素外部点击的不同方法。在 jQuery 示例中，脚本首先确保 DOM 已完全加载方法。这然后使用方法将事件处理程序附加到整个文档。在此处理程序中，我们检查单击事件的目标是否在元素使用 closest() 方法。如果单击发生在菜单外部，则菜单将隐藏。单击菜单头可显示菜单，使用方法。

Vanilla JavaScript 示例的操作类似，但没有任何外部库。该脚本向文档添加了一个单击事件侦听器。然后它检查点击目标是否在使用方法。如果目标不在内部，则通过将显示属性设置为“none”来隐藏菜单。单击菜单头将显示属性设置为“阻止”，使菜单可见。此方法确保使用纯 JavaScript 实现功能，使其成为轻量级解决方案。

探索 React 的点击检测之外

在 React 示例中，我们使用钩子来管理状态和副作用。这钩子创建对的引用元素，允许我们直接访问它。这 hook 用于添加和删除点击事件监听器。在事件处理程序中，我们使用以下命令检查单击是否在菜单之外 contains() 参考文献中的方法。如果是这样，我们更新状态以隐藏菜单。菜单头单击事件是通过更新状态以显示菜单来处理的。此示例演示了如何将外部点击检测集成到现代 React 应用程序中。

通过使用这些不同的方法，您可以选择最适合您的项目要求的方法。 jQuery 方法很简单，并且利用了 jQuery 的简单性。 Vanilla JavaScript 方法提供了一种轻量级、无依赖的解决方案。 React 方法演示了如何使用现代 React 挂钩来管理状态和副作用，为 React 应用程序提供强大的解决方案。每种方法都确保根据指定元素之外的用户交互来显示和隐藏菜单，从而增强用户体验。

使用 jQuery 检测元素外部的点击

jQuery 实现

// jQuery implementation to hide menus on outside click
$(document).ready(function() {
  $(document).click(function(event) {
    var $target = $(event.target);
    if(!$target.closest('#menuscontainer').length && 
       $('#menuscontainer').is(":visible")) {
      $('#menuscontainer').hide();
    } 
  });
  $('#menuhead').click(function() {
    $('#menuscontainer').show();
  });
});

使用 Vanilla JavaScript 处理元素外部的点击

普通 JavaScript 实现

// Vanilla JavaScript implementation to hide menus on outside click
document.addEventListener('click', function(event) {
  var isClickInside = document.getElementById('menuscontainer').contains(event.target);
  if (!isClickInside) {
    document.getElementById('menuscontainer').style.display = 'none';
  }
});
document.getElementById('menuhead').addEventListener('click', function() {
  document.getElementById('menuscontainer').style.display = 'block';
});

使用 React 检测元素外部的点击

反应实施

// React implementation to hide menus on outside click
import React, { useRef, useEffect, useState } from 'react';
const MenuComponent = () => {
  const menuRef = useRef(null);
  const [isMenuVisible, setMenuVisible] = useState(false);
  useEffect(() => {
    function handleClickOutside(event) {
      if (menuRef.current && !menuRef.current.contains(event.target)) {
        setMenuVisible(false);
      }
    }
    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [menuRef]);
  return (
    <div>
      <div id="menuhead" onClick={() => setMenuVisible(true)}>Menu Head</div>
      {isMenuVisible &&
        <div id="menuscontainer" ref={menuRef}>
          <p>Menu Content</p>
        </div>
      }
    </div>
  );
};
export default MenuComponent;

通过点击外部检测增强用户交互

检测元素外部的点击对于增强网页上的用户交互至关重要。此技术通常用于下拉菜单、模式对话框和工具提示，以提供无缝的用户体验。需要考虑的一个高级方面是处理需要根据外部点击隐藏的多个元素。这可能涉及更复杂的逻辑，以确保隐藏正确的元素，而其他元素仍然可见。实现这一点需要仔细的事件处理，并可能维护当前可见元素的状态。

另一个重要的考虑因素是可访问性。确保残障用户可以访问您的交互元素至关重要。例如，您应该确保不仅可以通过单击外部来关闭下拉菜单和模式，还可以通过按钥匙。此外，适当地管理焦点也很重要，这样键盘导航才能直观且实用。实现这些功能需要充分了解 JavaScript 和可访问性最佳实践，以创建包容性的用户体验。

如何通过外部点击检测处理多个菜单？
您可以通过向每个菜单添加一个类并迭代它们以检查单击是否发生在其中任何一个菜单之外来管理多个菜单。使用方法来确定单击的元素与每个菜单的关系。
按下 Escape 键时如何关闭模态框？
添加事件监听器事件并检查是否或者属性等于 27（退出键）。如果为 true，则隐藏模式。
我可以在没有 jQuery 的情况下使用点击外部检测吗？
是的，您可以使用纯 JavaScript 来添加事件侦听器并根据您的元素检查事件目标。上面的示例使用 Vanilla JavaScript 演示了这一点。
如何通过点击外部检测确保可访问性？
确保您的交互元素可以使用鼠标和键盘操作。使用 ARIA 角色和属性使这些元素可访问，并适当管理焦点状态。
是否可以检测 React 中元素外部的点击？
是的，React 提供了类似的钩子和通过在组件安装和卸载时附加和删除事件侦听器来处理外部点击。
点击外部检测的性能考虑因素有哪些？
向文档添加事件侦听器可能会影响性能，尤其是对于许多元素。通过消除事件处理程序的抖动并在不需要时删除侦听器来进行优化。
我可以在 Angular 或 Vue 等框架中使用点击外部检测吗？
是的，Angular 和 Vue 都提供了检测元素外部点击的机制。 Angular 使用指令，而 Vue 在组件内使用自定义指令或事件处理。
如何测试点击检测功能之外的情况？
使用自动化测试工具，例如用于 React 的 Jest 和 Enzyme，或用于 Angular 的 Jasmine 和 Karma。模拟单击事件并验证元素的行为是否符合预期。
我可以将点击外部检测应用于动态添加的元素吗？
是的，请确保您的事件侦听器设置为处理动态添加的元素。使用事件委托来管理初始加载后添加的元素的事件。

总结点击外部检测的技术

在 Web 应用程序中加入点击外部检测可显着改善用户交互。无论使用 jQuery、Vanilla JavaScript 还是 React，所提供的解决方案都有助于有效管理动态元素。通过理解和应用这些方法，您可以确保菜单和模式的行为可预测，从而增强整体用户体验。这种方法不仅简化了界面，还保持了可访问性，确保所有用户都可以与您的 Web 应用程序无缝交互。