javascript - React 应用程序中除特定 DOM 节点之外的任何内容上的单击事件

Question

在 React 应用程序中捕获和处理“除特定 DOM 节点之外的任何内容”上的点击事件的最佳方法是什么？

Answer 1

点击事件的处理程序是最简单的部分:这可以是任何方法。 事件的注册以及调用处理程序的触发器是最困难的部分。

没有干净的方法来捕获“在外部点击......”事件。 然而，您可以应用各种(HTML/CSS/Javascript)技巧:

• 如果它是模态页面/弹出窗口，您还可以渲染整个页面背景矩形(例如稍微透明的灰色)，它位于整个页面的前面，但弹出窗口的后面。向该背景添加一个点击事件监听器以删除模态+灰色背景。
• 另一种方法是在您的 top-react 组件上使用 focusout javascript 事件:
  • 由 React 渲染的顶部 HTML 组件应该能够获得焦点(需要是 <a> 或类似的 HTML，或者 - 不太干净 - 需要 tabindex=... 才能工作)
  • 渲染后立即赋予元素焦点(在 componentDidMount()` 内)
  • 添加焦点事件监听器，该监听器会触发处理程序对外部的点击执行某些操作。

一旦组件不再具有焦点，就会触发 focusout 事件: - 如果组件的子组件获得焦点(例如，您单击组件内的某些内容)，也会触发焦点输出:对于菜单通常没有问题，但对于带有表单的弹出窗口来说是不需要的 - 如果用户按 TAB 键，焦点也会被触发。