Cytoscape.js 如何实现拖拽节点时不自动选中、仅点击才选中

Cytoscape.js 默认开启了拖拽节点时自动选中的交互规则，你可以通过以下两种方式实现仅点击才选中节点的需求：

方案1：修改初始化配置（最简便） #

直接在初始化 Cytoscape 实例时关闭自动选中配置即可：

const cy = cytoscape({
  // 你的其他原有配置，如container、elements、style等
  autoselect: false, // 关闭拖拽元素时自动选中的默认行为
})

该配置生效后，仅手动点击节点才会触发选中，拖拽操作不会再改变节点的选中状态。

方案2：自定义事件逻辑（适用于需要定制选中规则的场景） #

如果你需要完全接管选中逻辑（比如自定义多选规则、选中联动其他业务逻辑），可以按以下步骤实现：

• 第一步：初始化时关闭全局默认选中能力

const cy = cytoscape({
  // 其他原有配置
  selectionEnabled: false, // 关闭默认的元素选中交互
})

• 第二步：添加事件监听，自定义选中逻辑，同时避免拖拽结束误触发选中

let isDragging = false

// 节点开始拖拽时标记状态
cy.on('grab', 'node', () => {
  isDragging = true
})

// 拖拽结束后重置状态，加短延时避免tap事件先触发导致误判
cy.on('free', 'node', () => {
  setTimeout(() => {
    isDragging = false
  }, 50)
})

// 监听节点点击事件，仅非拖拽状态下执行选中
cy.on('tap', 'node', (e) => {
  if (isDragging) return
  const targetNode = e.target
  const originalEvt = e.originalEvent

  // 未按住Ctrl/Command键时先清空已有选中
  if (!originalEvt.ctrlKey && !originalEvt.metaKey) {
    cy.elements().unselect()
  }

  // 切换当前节点选中状态
  targetNode.toggleSelect()
})

内容的提问来源于stack exchange，提问作者Artem Ermakov