如何在cytoscape.js中禁用点击背景取消选中节点的功能？

解决方案 #

你可以通过两种方式实现点击背景不取消节点选中的效果： #

方案1：修改初始化配置（更推荐）

cytoscape.js在初始化的selection配置项中自带了关闭该行为的参数，直接在初始化代码中添加配置即可：

const cy = cytoscape({
  // 此处保留你原有的容器、元素、样式等配置
  selection: {
    deselectOnViewportTap: false
  }
})

该配置会直接禁用点击视口（背景）自动取消所有选中元素的默认行为，不需要额外绑定事件。 #

方案2：绑定tap事件拦截

如果你已经完成初始化，不希望修改原有初始化参数，也可以通过事件绑定实现，你之前的代码不生效有两个原因：

1. 事件名拼写错误，你写的tab是错误的，正确事件名是tap
2. cytoscape自定义事件仅调用preventDefault无法完全阻止默认行为，需要返回false
   正确的写法如下：

cy.on('tap', ev => {
  if (ev.target === cy) { // 确认点击的是背景区域
    return false
  }
})

内容的提问来源于stack exchange，提问作者Michael Hilus