javascript - SVG 上的鼠标行为滞后

Question

我正在为我正在构建的网络应用程序开发 dentry 选择菜单。我找到了一个 SVG，正在修改它。

我尝试简化鼠标行为，仅使大区域可悬停('.parent')，而其他内容为{pointer-events:none}。然而，存在很大的滞后。当您将鼠标快速移入其中一颗 dentry 时，它通常不会使用react。仅当缓慢进入其中时。

你也看到了吗？我能做什么？

 $('.parent').mouseover(function(){
  $(this).css('fill', 'red');
});

$('.parent').mouseleave(function(){
  $(this).css('fill', 'none');
});

link to the codepen playground

Answer 1

对 CSS 进行简单更改即可解决该问题:

svg *{
  pointer-events: none; // Disable pointer-events for all elements inside the SVG
}
svg .parent{
  pointer-events: all; // Enable pointer-events only on certain elements
}

这是您的 codepen 的更新版本:https://codepen.io/etiennemartin/pen/yovzZb

我还更改了触发鼠标悬停的方式，但这只是个人喜好。对我来说看起来更干净。