Highstock数据结构ID获取问题：点击事件无法用this.id调用

嘿，我来帮你搞定这个点击事件里拿不到数据ID的问题！

问题出在哪？ #

你在数据结构里明明定义了id字段，但直接用this.id拿不到，核心原因是当前点击事件的上下文里，this并没有指向你数据里的那个对象。之前this.color/this.name能生效，大概率是因为你在渲染这些属性的时候，已经把数据对象绑定成了this的指向，但点击事件的this往往会指向触发事件的DOM元素，而不是你的数据对象，所以自然拿不到id。

几种可行的解决方案 #

方案1：用bind绑定数据对象作为上下文

在绑定点击事件的时候，用bind()把当前的数据对象绑定到事件函数的this上，这样点击时this就会指向你的数据项：

_DATA_XY0.forEach(item => {
  // 假设你创建了一个可点击的元素（比如按钮、卡片）
  const clickableElement = document.createElement('div');
  clickableElement.textContent = item.name;
  
  // 用bind把item绑定到事件函数的this上
  clickableElement.addEventListener('click', function() {
    // 现在this就是当前的数据项，能直接拿到id
    window.open(`https://your-target-url.com/${this.id}`, '_blank');
  }.bind(item));
  
  document.body.appendChild(clickableElement);
});

方案2：用箭头函数+闭包捕获数据项

箭头函数不会改变this的指向，还能直接捕获外层循环里的item变量，写法更简洁：

_DATA_XY0.forEach(item => {
  const clickableElement = document.createElement('div');
  clickableElement.textContent = item.name;
  
  clickableElement.addEventListener('click', () => {
    // 直接用item.id就行，不用管this
    window.open(`https://your-target-url.com/${item.id}`, '_blank');
  });
  
  document.body.appendChild(clickableElement);
});

方案3：把ID存在DOM的自定义属性里

如果不想依赖上下文或闭包，可以把ID存到元素的data-*自定义属性中，点击时从元素上读取：

_DATA_XY0.forEach(item => {
  const clickableElement = document.createElement('div');
  clickableElement.textContent = item.name;
  
  // 把ID存到data-item-id属性里
  clickableElement.dataset.itemId = item.id;
  
  clickableElement.addEventListener('click', function() {
    // 从当前点击的元素上取出ID
    const targetId = this.dataset.itemId;
    window.open(`https://your-target-url.com/${targetId}`, '_blank');
  });
  
  document.body.appendChild(clickableElement);
});

总结 #

核心就是要确保点击事件触发时，你能正确访问到对应数据项的id——要么把数据对象绑定到事件函数的上下文，要么用闭包直接捕获数据，要么把ID存在DOM元素上。别再直接依赖this.id啦，因为它的指向不一定是你想要的数据对象~

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