时间戳

首页 > 解决方案 > 检测鼠标在 React 组件中的点击位置

javascript - 检测鼠标在 React 组件中的点击位置

问题描述

在我的 React 应用程序中，我有一个侧导航栏，可以通过单击图标来打开和关闭。

如果导航栏打开并且用户单击导航栏之外的任何位置，我仍然想关闭它。我如何知道点击是否在导航栏之外？我的主要挑战是确保点击不在导航栏的子节点上。所以，像这样检查导航是不够的：

mouseDownHandler(e) {

   var container = e.target;
   if(container !== "nav-bar") {

      // Do something...
   }
};

我还需要确保点击的区域不是nav-bar.

标签： javascriptreactjsdomvirtual-dom

解决方案

您需要在文档元素中添加一个事件监听器（例如在componentDidMount您的导航栏组件中），并在您的导航栏被销毁时将其移除（例如在 中componentWillUnmount）。

然后你需要引入一个 ref 来获取导航栏元素的句柄。

所有事件处理部分都在这里回答：检测特定 div 之外的点击及其所有子项

推荐阅读