当用户意图单击时如何避免鼠标悬停事件

Question

我有一个可以悬停和单击的元素。悬停在元素上时，我会显示某些内容的预览，但单击时我需要根据单击事件相关逻辑完全更改页面内容。现在的问题是，当用户的意图是单击时，即使我的代码最终也会触发悬停流程，因为首先触发鼠标悬停事件，然后触发单击事件。从 CX 的角度来看，它不会造成任何问题，但实际上会降低网页的延迟，因为鼠标悬停流程上需要做大量工作，这实际上是无用的，因为用户的意图是单击。我能想到的一种解决方案是在鼠标悬停事件发生后等待一段时间，这样如果同时触发单击事件，我可以删除悬停事件。但这个解决方案并不好，因为当用户的意图是实际悬停时，它会影响用户的体验。有没有更好的方法通过 JS/jQuery 来避免这种情况。我无法使用任何外部库。 谢谢

Answer 1

无法读取用户的想法。所以就让用户选择他们想要的。例如，您可以添加一个复选框来打开/关闭悬停事件，并根据常见偏好给出默认值

Answer 2

在你的元素上，尝试这个 css 内容：

element{
  cursor: not-allowed;
  pointer-events: none;
}