鼠标移动速度比工具提示快

mouse moves faster than tooltip

本文关键字：工具提示 速度 移动 鼠标      更新时间：2023-09-26

我有一个有棱角的directive缠绕在D3 graph上。我创建了一个tooltip，我处理父元素的'mouseover'和'mouseout' visibility，我还处理'mousemove'中的工具提示position，以便它随着鼠标移动。

工具提示为 absolute 。

问题是，当我移动鼠标指针的速度足够快时，即使鼠标指针仍在指定区域内，也会调用父级的mouseout事件。我登录并发现，这是因为有时鼠标指针(快速移动时，工具提示位置没有更新得那么快(将鼠标悬停在工具提示上，该工具提示绝对定位而不是父级的一部分。

这造成了一些困难，因为在父元素mouseout上，我也在更改另一个元素的可见性，因此它会对快速鼠标移动产生波动/闪烁的影响。

我不确定这是预期的行为，还是特定于 D3 或角度。

这是一个小提琴：http://jsfiddle.net/6bQA8/5/

最初显示的是text and polylines，当hovered任何饼图切片时，它们都会hide。在任何pie slices hover，你会得到一个tooltip，如果你移动你的mouse，tooltip也会移动，如果你移动你的mouse足够快，检查console，你会看到"tooltip hovered"，同样在UI上你会看到闪烁的text and polylines，应该在切片mouseout上visible。

在理想情况下，永远不应调用"工具提示悬停"，因为tooltip始终随mouse更新，并且不低于pointer。

PS：解决问题的一种方法是向工具提示添加pointer-events:none或从指针增加工具提示的offset，但我更感兴趣的是知道为什么会发生这种情况，以及这是否是框架或浏览器的限制或代码中的错误。另外，由于我稍后会重复使用相同的工具提示对象进行单击，因此当时我将不得不删除pointer-events:none，并且增加offset在UI中看起来不是很好。此外，这两种方法实际上都是黑客，可能不是正确的解决方案。

既然你问的是除pointer-events:none之外的解决方案，我就是这样做的：

slices.on("mouseout", function(d) {
                //return if the mouse out is triggered by the tooltip-menu
if(d3.select(d3.event.toElement).classed("tooltip_menu")){
        return;//if the to element is tooltip_menu
}

在这里工作小提琴

Javascript 在完成所有计算和 DOM 操作之前无法阻止鼠标，这就是为什么移动工具提示很重要的原因。在现代浏览器中，操作至少以 4ms 的延迟发生，因为 setTimeout/setInterval 最小延迟为 4ms。

相关文章：