禁用鼠标悬停交互 JointJS 图答案

【问题标题】：disable mouseover interaction JointJS diagram禁用鼠标悬停交互 JointJS 图
【发布时间】：2015-07-10 19:03:31
【问题描述】：

我正在尝试删除发生在链接和矩形上的鼠标悬停操作。

我尝试将 interactive: false 添加到 joint.dia.Paper 对象 - 这并没有完全帮助。我仍然看到鼠标悬停的变化。我希望链接（尤其是）在鼠标悬停时不响应。

我如何做到这一点？

【问题讨论】：

您可以将事件侦听器添加到将处理onmouseover 事件的链接和矩形容器。如果您不想在任何元素上发生mouseover 事件，则通过返回false 来阻止它。我希望我能正确解决您的问题。
@sunpietro jointjs 文档没有显示如何添加onmouseover 监听器。你能举个例子吗？我能够使用link.on('change:vertices', someChange) 检测更改（当顶点被拖动时调用someChange 函数。鼠标悬停时我该怎么做？
这不只是一个 CSS 的东西吗？只需删除任何悬停 CSS 属性...

【解决方案1】：

要理解这一点，您必须了解链接的 SVG 标记是如何构建的。文档解释得很好：

如果您需要更详细地检查 CSS 类结构，我发现在浏览器上使用 Inspect Element 很有用。

一旦你理解了这一点，你就会发现你可以使用 CSS 做你所要求的事情。看这里的演示：

对于链接，您需要在 connection-wrap、link-tools、marker-vertices 和 marker-arrowhead 类上设置 display: none。

为了完整起见，您还可以在形状上设置cursor: auto。例如

.element.basic.Rect {
    cursor: auto
}

【讨论】：