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

【问题标题】：mouse moves faster than tooltip鼠标移动速度比工具提示快
【发布时间】：2016-05-23 09:55:48
【问题描述】：

我有一个角度 directive 包裹在 D3 graph 周围。我创建了一个tooltip，并处理了父元素的'mouseover' 和'mouseout' 中的visibility，我还处理了'mousemove' 中的工具提示position，以便它随鼠标移动。

工具提示是absolute。

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

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

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

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

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

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

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

【问题讨论】：

你真的应该给我们一些code 来使用，最好是一个小提琴。另外，如果您实现了目标，您打算如何关闭工具提示？
@IvanModric 添加了一个小提琴。工具提示会在 mouseout 时关闭，这是正确的行为，但由于移动鼠标足够快会悬停在工具提示本身上，因此会调用 mouseout，这不是理想的行为。

标签： javascript css angularjs d3.js

【解决方案1】：

由于您要问除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
}

工作小提琴here

【讨论】：

【解决方案2】：

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

【讨论】：