onmouseenter 閃爍提示

Question

我想在將鼠標懸停在 svg 矩形上時顯示工具提示，但工具提示一直在閃爍，在 display: none 和 display: flex 之間切換不規律且不可預測。

當我使用相同的代碼但將鼠標懸停在 div 上時，結果非常平滑，因此它似乎與 rect 元素有關。

我在下面的代碼片段中得到的行為與我在 Chrome 中打開 HTML 時的行為不同。
在片段中，如果我從左到右或從上到下輸入矩形，它似乎可以工作，但反之則不行。
在 Chrome 中，它只是不斷閃爍我輸入的任何方向。

為什么它會這樣，我能做些什么呢？

 const tooltips = document.querySelectorAll('.tooltip'); const bars = document.querySelectorAll('rect'); document.addEventListener('mousemove', fn); function fn(e) { tooltips[0].style.left = e.pageX + 'px'; tooltips[0].style.top = e.pageY + 'px'; } bars[0].onmouseenter = () => { tooltips[0].style.display = 'flex'; } bars[0].onmouseleave = () => { tooltips[0].style.display = 'none'; }

 .tooltip { display: none; position: absolute; background-color: grey; }

 <div class="tooltip"> <p>Rect 1</p> </div> <svg width="500" height="500"> <rect width="200" height="30" x="0" y="0" style="fill:rgb(0,0,255)" /> </svg>

Answer 1

因為當工具提示打開時，它會經過鼠標。 並且觸發了 rect 的mouseleave ，並且工具提示關閉，並且再次觸發了 mouseenter。 所以它進入了一個無限循環。 我們可以使用pointer-events: none來避免工具提示上的鼠標事件。

 const tooltips = document.querySelectorAll('.tooltip'); const bars = document.querySelectorAll('rect'); document.addEventListener('mousemove', fn); function fn(e) { tooltips[0].style.left = e.pageX + 'px'; tooltips[0].style.top = e.pageY + 'px'; } bars[0].onmouseenter = () => { tooltips[0].style.display = 'flex'; } bars[0].onmouseleave = () => { tooltips[0].style.display = 'none'; }

 .tooltip { display: none; position: absolute; background-color: grey; pointer-events: none; }

 <div class="tooltip"> <p>Rect 1</p> </div> <svg width="500" height="500"> <rect width="200" height="30" x="0" y="0" style="fill:rgb(0,0,255)" /> </svg>

另一種方法是，您可以將工具提示推離鼠標稍遠一點。 例如，我使用e.pageX + 5和e.pageY + 5 。

 const tooltips = document.querySelectorAll('.tooltip'); const bars = document.querySelectorAll('rect'); document.addEventListener('mousemove', fn); function fn(e) { tooltips[0].style.left = (e.pageX + 5) + 'px'; tooltips[0].style.top = (e.pageY + 5) + 'px'; } bars[0].onmouseenter = () => { tooltips[0].style.display = 'flex'; } bars[0].onmouseleave = () => { tooltips[0].style.display = 'none'; }

 .tooltip { display: none; position: absolute; background-color: grey; }

 <div class="tooltip"> <p>Rect 1</p> </div> <svg width="500" height="500"> <rect width="200" height="30" x="0" y="0" style="fill:rgb(0,0,255)" /> </svg>