鼠標移動速度比提示更快

我有一個角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

鼠標移動速度比提示更快

回答

相關問題