单击外部检测器

您可以单击开放的东西是合理的UX事物，然后不仅可以单击相同的内容以关闭它，而且可以单击其打开的内容以关闭它。 Kitty Giraudel只是为此写了博客。诀窍是，一旦打开了东西，就可以将事件处理程序附加到窗口上，并用手表进行事件（例如另一键单击）。如果随后的点击未发生在新开放的区域内，请将其关闭。就像，字面上是东西。我认为这是一个不错的技巧。

但是，有很多小事要考虑。例如：

我们必须停止在切换本身上点击事件的传播。否则，它将上窗口单击“侦听器”，并且由于菜单中的切换不包含在菜单中，因此一旦我们尝试打开它，它将立即关闭后者。

对右。不能拥有那个，也可以打破整个事情。

我们在Codepen的许多地方都有相同的模式。像Kitty一样，我们在React中实现了它。在窥视我们的实施时，我认为值得一提的是许多钟声和呼尾。例如，我们的不是功能或钩子，而是我们使用的组件包装器：

 <clickoutsidedetector onclickoutside="{（）="> {closethething（）; }}}
>
  菜单或模态之类的东西。
</clickoutsidedetector>

这样，它是一个通用包装器，我们可以在“户外单击”上用于任何东西。钟声和呼尾是：

• 您可以通过组件道具，以便它不必表现为
  ，但是无论您希望它在语义上是什么。
• 如果目前正在积极聆听事件，则侦听道具使您可以切换。就像一种快速的方法来短路。
• ESC按键是相当于在外面单击的功能。
• 处理触摸事件以及点击
• 处理单击外部发生在
• 允许您传递元素以忽略，因此，我们可以针对不会触发外部单击的元素具体而不是猫咪记录的止动技巧。

这么多的小东西！对我来说，这是现实世界发展的完美小例子。您只想要一种小行为，最终需要处理很多考虑和边缘案例，而且从未真正做过。在过去的几个月中，我刚刚触摸了我们的组件，因为我们使用了第三方工具，改变了他们做的事情，从而影响了页面上使用的iframe。最终，我不得不观看一个模糊的事件，然后检查文档的阶级列表。激活者看看这是在外面吃点击的东西！

Annnnyway，我在这里抛出了我们的唯一笨拙的版本。

我从凯蒂（Kitty）的帖子中看到了一些我们没有处理的东西，这是第一句话：

我们需要一种方法来关闭菜单，或者在其外部单击菜单或从中删除菜单。

强调我的。不用担心，我现在的代码中有一个待办事项。

以上是单击外部检测器的详细内容。更多信息请关注PHP中文网其他相关文章！