如何禁用JSPlumb Community Edition特定类型连接线的鼠标悬停效果

解决方案 #

1. 禁用不可点击连接线的悬停指针样式与交互

给所有notUpdatable开头的连接线类型新增cssClass属性绑定自定义样式类，通过CSS强制覆盖交互行为：
第一步，修改连接类型注册代码：

this.graphInstance.registerConnectionTypes({
    updatablePrerequisite: {
        paintStyle: {
            strokeWidth: 2,
            stroke: '#FF9201',
            outlineStroke: 'white'
        },
        hoverPaintStyle: updatableHoverCSS
    },
    notUpdatablePrerequisite: {
        paintStyle: {
            strokeWidth: 2,
            stroke: '#8E1E07',
            outlineStroke: 'white'
        },
        // 新增自定义样式类
        cssClass: 'non-interactive-connection'
        // 可删除该类型下的hoverPaintStyle配置，避免冗余
    }
});

第二步，在全局样式中添加对应CSS规则：

.non-interactive-connection, 
.non-interactive-connection .jtk-connector-overlay {
    cursor: default !important;
    /* 如需完全禁用点击、悬停等所有交互，可加下一行 */
    pointer-events: none;
}

2. 解决虚线连接线仅实线段触发悬停的问题

该问题是SVG元素的默认交互逻辑导致：虚线的透明间隙不会响应指针事件。如需让可点击的虚线连接线全路径触发交互，给对应连接类型的paintStyle配置添加透明外描边即可：

updatableLockedPrerequisite: {
    paintStyle: {
        strokeWidth: 2,
        stroke: 'red',
        dashstyle: '2 2',
        // 新增透明外描边扩大交互响应区域
        outlineWidth: 4,
        outlineStroke: 'transparent'
    },
    hoverPaintStyle: updatableLockedHoverCSS
}

外描边宽度可根据你的连接线粗细调整，保证覆盖虚线的间隙区域即可。

内容的提问来源于stack exchange，提问作者Eric Malalel