如何允许鼠标单击元素附近？

Question

很久以前，在一次关于React的会议演讲上，我看到演示者在他的代码中添加了一些内容，使您可以单击并拖动屏幕上的分隔线，使其达到一定像素数之内，而不是完全单击即可。它。

这是一个提高可用性的方便概念，尽管我不知道它叫什么。加上“ slop”？无论如何，我完全忘记了他是如何做到的，大概是使用某种填充方法。有谁知道这种做法叫什么以及如何实施？我认为这是他通过CSS实现的，但不确定。

Answer 1

您可以使用vanilla js来做到这一点。使用element.getBoundingClientRect()来检索元素相对于主体的偏移量，并与实际的mouseX和mouseY（当然是在单击时刻）进行比较，您现在知道了元素与点击之间的距离，现在添加一些逻辑，例如：案例距离<可接受的偏移量，然后产生一些副作用。