使用Vis.js在点击位置绘制节点：多节点重复定位问题求助

问题描述 #

• 在浏览器中使用Vis.js绘制名为「places」的节点，需求是在用户点击的位置创建对应节点
• 当前实现：调用addPlace()方法创建新节点时，在节点构造函数中添加事件监听器来获取点击坐标
• 异常现象：创建2个及以上节点时，所有节点均叠加在首次点击的位置上，尽管每次添加节点后都会移除事件监听器，无法实现每个节点对应独立的点击位置
• 推测原因：所有类实例共用同一个事件监听器，导致后续节点获取的坐标始终为首次点击的值

图1：多个节点叠加在同一位置的效果展示
图2：代码实现的相关截图

解决方案 #

1. 解耦事件监听与节点创建逻辑 #

将点击事件监听从节点构造函数中剥离，在addPlace()方法中绑定单次触发的监听器，获取坐标后再创建节点：

function addPlace() {
  // 定义单次点击的处理函数
  const handleCanvasClick = (e) => {
    // 根据Vis.js的画布坐标规则转换点击位置（如果是network实例，可用network.getPointerPosition(e)）
    const clickPosition = {
      x: e.clientX,
      y: e.clientY
    };

    // 传入坐标创建节点并添加到数据集
    const newPlace = new Place(clickPosition);
    placesDataSet.add(newPlace);

    // 手动移除监听器（配合once选项，双重保障）
    document.removeEventListener('click', handleCanvasClick);
  };

  // 使用once参数，让监听器自动触发一次后移除
  document.addEventListener('click', handleCanvasClick, { once: true });
}

2. 修改节点类，直接接收坐标参数 #

让Place类仅负责节点数据封装，不再处理事件逻辑，避免实例间状态污染：

class Place {
  constructor(position) {
    this.id = `place-${Date.now()}`; // 生成唯一ID
    this.x = position.x;
    this.y = position.y;
    this.label = `Place ${this.id.slice(-6)}`;
    // 其他节点属性（如颜色、形状等）
  }
}

3. 核心优化点 #

• 避免类实例持有事件监听器，防止不同实例共享同一监听器的状态
• 使用{ once: true }确保监听器仅执行一次，自动清理，无需担心手动移除的引用问题
• 明确职责划分：addPlace()负责处理用户交互，Place类负责节点数据定义

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