Vis.js技术问题：如何避免双击节点后触发拖拽行为？

这个问题是因为Vis.js双击节点时，原生鼠标事件的默认拖拽行为没被阻止，导致节点跟着光标移动。直接在双击事件回调里加一行代码就能解决：

在doubleClick处理函数开头添加params.event.preventDefault();，阻止原生事件的默认行为，就能避免触发拖拽。

修改后的代码如下：

// initialize the network!
network = new vis.Network(container, data, getOptions(networkLayout));
network.fit();

// add event listener for double click on node
network.on("doubleClick", function (params) {
    // 阻止默认拖拽行为
    params.event.preventDefault();
    
    // get the id of the clicked node
    var clickedNodeId = params.nodes[0];
    var nodesToUpdate = [];

    // get the adjacent nodes of the clicked node
    var adjacentNodes = network.getConnectedNodes(clickedNodeId);

    adjacentNodes.forEach(addAdjacentNodesToUpdate);
    function addAdjacentNodesToUpdate(nodeId, index) {
        nodesToUpdate.push({id: nodeId, hidden: false, physics: true});
    }
    nodes.update(nodesToUpdate);
    showHideEdges(nodesToUpdate);

});

如果上面的方法不生效，还可以试试临时禁用拖拽再恢复：

network.on("doubleClick", function (params) {
    // 临时禁用节点拖拽
    network.setOptions({ interaction: { dragNodes: false } });

    // 你的原有业务逻辑
    var clickedNodeId = params.nodes[0];
    // ... 省略原有代码

    // 异步恢复拖拽，避免阻塞事件循环
    setTimeout(() => {
        network.setOptions({ interaction: { dragNodes: true } });
    }, 0);
});

原理是双击瞬间禁用拖拽，让Vis.js不会触发拖拽逻辑，处理完业务后再恢复正常拖拽功能。

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