Question

我有directive缠绕D3 graph。我创建了tooltip并处理了父元素的visibility和'mouseover'中的'mouseout'，我还处理了position中的工具提示'mousemove'这样它就会随着鼠标移动。

工具提示为absolute。

问题是，当我快速移动鼠标指针时，即使鼠标指针仍在指定区域内，也会调用父项的mouseout事件。我记录并发现，它正在发生，因为有时鼠标指针（当快速移动，工具提示位置没有更新如此之快）盘旋在工具提示上，工具提示绝对定位而不是父母的一部分。

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

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

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

最初会显示text and polylines，当hide超过任何饼图切片时，他们会hovered。在hover pie slices上tooltip，您将获得mouse，如果您移动tooltip，mouse也移动，如果您移动console {1}} {}}}检查"tooltip hovered"，您会看到text and polylines，同样在用户界面上，您会看到visible mouseout tooltip mouse来自切片。

在理想情况下，＆＃34;工具提示徘徊＆＃34;永远不应该调用，pointer始终使用pointer-events:none进行更新，但不会低于offset。

PS：解决问题的一种方法是在工具提示中添加pointer-events:none或从指针增加工具提示的offset，但我更想知道为什么会发生这种情况，如果这样是框架或浏览器的限制或代码中的错误。此外，由于我稍后为了点击目的而重新使用相同的工具提示对象，所以那时我必须删除{{1}}，并且增加{{1}}在UI中看起来不太好。此外，这两种方法实际上都是黑客攻击，而且可能不是正确的解决方案。

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
}

工作小提琴here

Answer 2

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

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

2 个答案: