javascript - 是否可以让光标不与 JavaScript 行交互？

Question

我用 d3 构建了一个图表。当光标移动到图形的顶部线条上时，鼠标不会与线条交互，但底部的情况并非如此。当我滚动到底线时，光标会发生变化，这意味着您无法与焦点矩形进行交互。有没有办法做到这一点，这样光标就不会意识到它正在像图表顶部那样越过一条线？

谢谢。

score 0 · Accepted Answer

包含路径的<g>元素（使用 class=topic）出现在 DOM 中的<g>时间比您设置画笔事件的时间晚。这将导致路径位于画笔顶部，<g>因此它们首先拾取指针事件，从而导致指针图标发生变化。

如果您插入“主题”路径，以便它们在 DOM 中显示在画笔矩形之前，则不会发生这种情况。为所有主题创建一个单独的主题可能是最简单的，<g>因此您只需要担心那个元素的位置。

score 0 · Accepted Answer

在你的 CSS 中试试这个：

path {
  pointer-events: none;
}

编辑：好的，有人不喜欢这个答案。:-( 我快速查看 jsbin 并在路径上设置指针事件似乎完全符合要求。也许它的解决方案太宽泛了。

再看一遍，该示例似乎可以正常工作。但是当您经过路径时，光标会稍微闪烁。也许它是特定于浏览器的 - 不知道。

但是让我们让它更具体到主题路径

.topic path {
  pointer-events: none;
}

画笔仍然起作用，并且没有光标闪烁，也没有我能看到的干扰。

另一种可能性是按源顺序稍后渲染画笔，以便路径先出现，画笔位于顶部。

2 回答 2