html - 如何允许鼠标单击靠近元素?

标签 html css reactjs usability

很久以前,在一次关于 React 的 session 演讲中,我看到演示者在他的代码中添加了一些东西,允许您通过点击并拖动屏幕上的分隔线,使其到达一定数量的像素以内,而不是准确地点击

这是一个提高可用性的方便概念,虽然我不知道它叫什么。也许添加“slop”?无论如何,我完全忘记了他是如何做到的,大概是使用了一些填充方法。有谁知道这种做法叫什么以及如何实现?我认为这是他用 CSS 实现的,但不确定。

最佳答案

您可以使用 vanilla js 来做到这一点。使用 element.getBoundingClientRect() 获取元素相对于 body 的偏移量并与实际的 mouseXmouseY 进行比较(当然是在点击时刻) 您现在知道元素和点击之间的距离,现在添加一些逻辑,例如:Case distance < acceptable offset 然后做一些副作用。

关于html - 如何允许鼠标单击靠近元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56586792/

相关文章:

html - 带有关键帧的 CSS 3 动画在不透明度和 z-index 的悬停变化上不起作用

javascript - 悬停在一个元素上更改另一个元素的背景图像

javascript - 如何使用 JS 显示带有自定义图标而不是个人资料图像的 Twitter 提要

javascript - 如何检查项目是否已存在于状态中?

javascript - 如何在 Javascript 中比较 id

javascript - 单击时边框停止缩小尺寸

javascript - 待办事项列表,并在 5 个元素处选中以显示按钮

css - 在 .qss 中为 QPushButton 创建一些样式

javascript - 如何在 Redux 中创建 Dynamic Reducer

string - 在 React 中将组件的状态添加到字符串中