如何允许鼠标单击靠近元素？
How to allow a mouse click close to an element?
很久以前，在一次关于 React 的会议上，我看到演示者在他的代码中添加了一些东西，让你可以 click-drag 通过进入屏幕的一定数量的像素来在屏幕上创建一个分隔线，而不是准确点击它。
这是一个提高可用性的方便概念，虽然我不知道它叫什么。也许添加 'slop'？无论如何，我完全忘记了他是如何做到的，大概是使用了一些填充方法。有谁知道这种做法叫什么以及如何实施？我认为这是他用 CSS 实现的，但我不确定。
您可以使用 vanilla js 来做到这一点。使用 element.getBoundingClientRect() 检索元素相对于 body 的偏移量并与实际的 mouseX 和 mouseY（当然是在点击时刻）进行比较，您现在知道元素与点击之间的距离，现在添加一些逻辑，例如：Case distance < acceptable offset 然后做一些副作用。
很久以前，在一次关于 React 的会议上，我看到演示者在他的代码中添加了一些东西，让你可以 click-drag 通过进入屏幕的一定数量的像素来在屏幕上创建一个分隔线，而不是准确点击它。
这是一个提高可用性的方便概念，虽然我不知道它叫什么。也许添加 'slop'？无论如何，我完全忘记了他是如何做到的，大概是使用了一些填充方法。有谁知道这种做法叫什么以及如何实施？我认为这是他用 CSS 实现的，但我不确定。
您可以使用 vanilla js 来做到这一点。使用 element.getBoundingClientRect() 检索元素相对于 body 的偏移量并与实际的 mouseX 和 mouseY（当然是在点击时刻）进行比较，您现在知道元素与点击之间的距离，现在添加一些逻辑，例如：Case distance < acceptable offset 然后做一些副作用。