鼠标移动速度比提示更快

我有一个角directive缠绕D3 graph。我已经创建了一个tooltip，并且我处理了和'mouseout'中的visibility父元素，我还处理工具提示，以便它随鼠标移动。鼠标移动速度比提示更快

工具提示是absolute。

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

这会产生一些困难，因为父元素的mouseout我也在改变另一个元素的可见性，所以它给快速鼠标移动带来波动/闪烁效果。

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

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

最初显示的text and polylines，他们会hide当hovered在任何的圆形切片。上hover通过任何pie slices的，你会得到一个tooltip，如果您移动mouse，该tooltip也移动，如果移动mouse够快，检查console，你会看到"tooltip hovered"，还对用户界面你会看到闪烁的text and polylines应该是visible从mouseout切片。

在理想的情况下，不应该调用“tooltip hovered”，因为tooltip总是随mouse更新，并且它不低于pointer。

PS：要解决这个问题的方法之一是增加pointer-events:none到提示或增加从指针工具提示offset，但我更想知道为什么发生这种情况，如果是这样的框架的限制或浏览器或代码中的错误。此外，因为我稍后重复使用相同的工具提示对象来进行点击，所以当时我将不得不删除pointer-events:none，并且在UI中增加offset看起来不太好。而且，这两种方法实际上都是黑客攻击，而不是正确的解决方案。

来源

2016-02-12 gaurav5430

你真的应该给我们一些'code'用，最好连工作小提琴。同样，如果你达到目标，你打算如何关闭工具提示？ –

@IvanModric添加了一个小提琴。该工具提示会在mouseout上关闭，这是正确的行为，但由于移动鼠标足够快地悬停在工具提示本身上，因此调用了鼠标输出，这不是理想的行为。 – gaurav5430

JavaScript不能阻止鼠标，直到它完成所有的计算和DOM操作，这就是为什么，在移动工具提示时会失败。在现代浏览器操作中至少发生4ms延迟，因为setTimeout/setInterval最小延迟为4ms。

来源

2016-02-12 11:07:08

因为你是从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

来源

2016-02-12 14:19:23 Cyril

鼠标移动速度比提示更快

回答

相关问题