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

Question

我有一个围绕着D3图表的Angular指令。我创建了一个工具提示，并在父元素的'mouseover'和'mouseout'中处理其可见性，还在'mousemove'中处理工具提示的位置，使其随着鼠标移动。

工具提示是绝对定位的。

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

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

我不确定这是否是预期行为，或者它是否特定于D3或Angular。

这里有一个JSFiddle链接：http://jsfiddle.net/6bQA8/5/

初始状态下，文本和折线会被显示，当鼠标悬停在任何一个扇形区域上时，它们会被隐藏。 当鼠标悬停在任何一个扇形区域上时，你将会得到一个提示框，如果你移动你的鼠标，提示框也会移动，如果你移动鼠标足够快，检查控制台，你会看到"tooltip hovered"，此外在UI上你会看到闪烁的文本和折线，它们应该在从扇形区域mouseout后仍然是可见的。

在理想情况下，“tooltip hovered”永远不应该被调用，因为提示框总是随着鼠标更新，并且不在指针下面。

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

- gaurav5430

---

你应该给我们一些 code 来一起工作，最好是一个 fiddle。另外，如果你达到了你的目标，你打算如何关闭这个提示框？ - Ivan Modric

@IvanModric添加了一个示例。当鼠标移出时，工具提示关闭是正确的行为，但由于鼠标移动得足够快会悬停在工具提示本身上，因此导致触发了鼠标移出事件，这不是理想的行为。 - gaurav5430

Answer 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
}

在这里工作的fiddle 链接

- Cyril Cherian

Answer 2

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

- Cezary Daniel Nowak