如何监听点击元素外事件

很多时候我们会有这样的需求: 模拟右键菜单等组件时, 点击组件外将组件隐藏.

在这个区域内右击试试

传统的方案是在 document 上绑 click 事件, 例如 这个 React 组件 或者 这个 React Hooks.

但其实我们关注错了事件: 不是 点击 (click), 而是 失去焦点 (blur). 上面这个例子就是用了 blur 事件完成的. 可以在 这里 看到使用焦点方案的更完整的封装.