如何监听Tom Select多选组件的选项点击事件？

Tom Select的多选组件里，选中的选项会高亮（通常用于删除操作），我想监听这个点击事件来实现额外功能，比如展示选中选项的更多信息。但Tom Select的API里没有提供这个点击事件，尝试给选项加事件监听器没成功，目前只有onFocus事件能部分实现，但切换选项时必须点击输入框外再重新聚焦新选项，操作很不方便。

示例代码：

var settings = {
  onFocus: function(){ console.log("clicked")}
};
document.querySelectorAll('.testSelect').forEach((el)=>{
   new TomSelect(el,settings);
});

方法1：事件委托监听选中项点击 #

Tom Select会把选中的选项渲染为带.item类的元素，我们可以给组件容器添加事件委托，统一监听这些元素的点击，这种方式适配选项动态增减的场景，不会出现遗漏：

document.querySelectorAll('.testSelect').forEach((el)=>{
  const tomSelect = new TomSelect(el, {
    // 你的其他配置项
  });
  
  // 给组件控制区绑定点击事件委托
  tomSelect.control.addEventListener('click', function(e) {
    const targetItem = e.target.closest('.item');
    if (targetItem) {
      // 跳过删除按钮的点击（如果不需要区分可以去掉这个判断）
      if (e.target.classList.contains('remove')) return;
      
      // 获取选项的value和文本内容
      const itemValue = targetItem.getAttribute('data-value');
      const itemText = targetItem.querySelector('.item-name').textContent;
      
      // 这里执行你的额外操作，比如展示详情
      console.log('点击了选中选项:', itemValue, itemText);
    }
  });
});

方法2：自定义选中项模板绑定事件 #

通过render配置自定义选中项的HTML模板，直接在模板中嵌入点击事件逻辑（注意：如果选项频繁增减，推荐用事件委托避免内存泄漏）：

document.querySelectorAll('.testSelect').forEach((el)=>{
  new TomSelect(el, {
    render: {
      item: function(data, escape) {
        return `<div class="item" data-value="${escape(data.value)}" onclick="handleItemClick('${escape(data.value)}', '${escape(data.text)}')">
                  <span class="item-name">${escape(data.text)}</span>
                  <button class="remove" onclick="event.stopPropagation()">×</button>
                </div>`;
      }
    }
  });
});

// 点击事件处理函数
function handleItemClick(value, text) {
  console.log('点击了选中选项:', value, text);
  // 这里编写你的额外操作逻辑
}

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