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

因为当tooltip打开的时候，它会过来鼠标。并且 mouseleave for rect 被触发，工具提示关闭并再次触发 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>

onmouseenter 闪烁的工具提示

1 个答案: