1. 首页
  2. css

CSS单击外部探测器

这是一个合理的用户体验,你可以点击打开某个东西,然后不仅可以点击同一个东西来关闭它,还可以点击它打开的东西的外部来关闭它。Kitty Giraudel刚刚在博客上提到了这一点。诀窍在于,一旦打开了这个东西,您就可以将一个事件处理程序附加到window上,用它监视事件(就像另一次单击)。如果随后的单击没有在新打开的区域内发生,请将其关闭。就像,字面上的thing.contains(event.target)。我认为这是一个很好的把戏。
不过还有很多小事情要考虑。例如:
我们必须停止切换本身上click事件的传播。否则,它将转到窗口单击侦听器,由于切换不包含在菜单中,因此在我们尝试打开它时,它将立即关闭后者。
Right。不能那样,否则会把事情搞砸的。
我们在CodePen的很多地方都有同样的模式。像Kitty一样,我们在React中实现了它。在看一下我们的实现时,我觉得有很多值得一提的东西。例如,我们使用的不是一个函数或钩子,而是一个组件包装,比如:
,但无论你想要它在语义上是什么。
– 如果listen道具当前正在积极收听事件,它允许你切换。像一种快速短路的方法。
– 按ESC键的功能相当于单击外部。
– 处理触摸事件和点击
– 处理外部点击变成的情况,在这种情况下window有一个blur事件而不是点击。
– 允许您传入要忽略的元素,而不是Kitty记录的stopPropagation技巧,我们可以对不会触发外部单击的元素进行详细说明。
太多的小事情了!对我来说,这是现实世界发展的一个完美的小例子。你只需要一个小小的行为,最终有一大堆的考虑和边缘案件你必须处理,它从来没有真正做到。在过去的几个月里,我刚刚接触了我们的组件,因为我们使用的第三方工具改变了它们的工作方式,从而影响了页面上使用的iframe。最后,我不得不观看一个blur事件,然后检查document.activeElement的classList,看看这是否是吃的东西外点击!
顺便说一句,我在这里抛出了一个我们的版本,只是稍微简化了一下。
我从Kitty的帖子中看到了一些我们没有处理的东西,就在第一句话中:
我们需要一种方法来关闭菜单,当我们在菜单外单击或从菜单中弹出时。
强调我的。别担心,我们的代码里还有一个任务要做。

CSS单击外部探测器 为WP2原创文章,链接:https://www.wp2.cn/css/css%e5%8d%95%e5%87%bb%e5%a4%96%e9%83%a8%e6%8e%a2%e6%b5%8b%e5%99%a8/