<tr>内图片点击时无法获取行数据的技术求助

核心原因分析 #

你遇到的问题本质是事件目标识别错误或SVG元素的事件行为干扰：

• 当点击SVG时，事件的target指向SVG元素而非<tr>，如果你的JS逻辑依赖e.target来定位行，就会出错；
• SVG作为独立的可交互元素，默认会接收点击事件，若未处理会导致原有行点击逻辑无法正确触发。

具体解决方案 #

方案1：修正JS中的行元素获取逻辑 #

把代码中依赖e.target获取行的逻辑，改成使用this或e.currentTarget——这两个对象始终指向绑定了点击事件的<tr>元素，和点击的子元素无关。

示例代码：

// 原错误逻辑（可能依赖e.target）
document.querySelectorAll('tr').forEach(tr => {
  tr.addEventListener('click', (e) => {
    // 错误：e.target是SVG，直接取数据会失败
    const rowData = e.target.dataset;
  });
});

// 修正后的逻辑
document.querySelectorAll('tr').forEach(tr => {
  tr.addEventListener('click', function(e) {
    // this 指向当前被点击的<tr>
    const rowId = this.dataset.rowId;
    // 后续编辑逻辑...
  });
});

方案2：让SVG事件穿透到父行 #

如果不需要SVG本身有交互效果，给SVG添加pointer-events: none的CSS属性，让点击事件直接穿透到下方的<tr>，等同于点击行的其他区域。

示例CSS：

.edit-column svg {
  pointer-events: none;
  user-select: none; /* 保留你之前设置的属性 */
}

方案3：为SVG单独绑定事件并复用行逻辑 #

如果需要SVG保留交互（比如hover样式），可以给SVG单独绑定点击事件，手动触发对应行的点击逻辑：

document.querySelectorAll('.edit-svg').forEach(svg => {
  svg.addEventListener('click', (e) => {
    e.stopPropagation(); // 避免重复触发行事件
    const targetRow = svg.closest('tr');
    // 触发行的点击事件，复用原有编辑逻辑
    targetRow.click();
  });
});

为什么替换文本正常？ #

文本是<td>的子文本节点，点击时e.target虽然是文本节点，但调用closest('tr')仍能正确找到父行；而SVG是独立的DOM元素，若你的原逻辑未处理这种嵌套元素的情况，就会出现无法获取行数据的问题。

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