如何在href中传递当前被点击<a>元素的引用？

哈哈，这个坑我踩过好多次！你用href="javascript:..."这种伪协议写法时，this确实会指向window对象，而不是你点击的<a>元素。给你几个实用的解决办法，按需选择：

方法1：直接创建元素绑定事件（最推荐，安全又清晰） #

别用innerHTML拼字符串了，直接用DOM API创建<a>标签，然后绑定点击事件——这样this或者event.target都能准确指向当前点击的a元素：

td = document.createElement("td");
const link = document.createElement("a");
link.textContent = "click me";
// 用普通函数的话，this就是a元素
link.addEventListener('click', function() {
  some_function(this, row_number, 'extra_param');
});
// 或者用箭头函数，通过event.target获取元素
// link.addEventListener('click', (e) => {
//   some_function(e.target, row_number, 'extra_param');
// });
td.appendChild(link);

这种方式还能避免innerHTML可能带来的XSS风险，而且如果循环里的row_number用let声明（ES6+），也不会出现闭包变量共享的问题。

方法2：改用onclick代替href伪协议 #

如果坚持要用innerHTML拼接，把href换成onclick就行——这里的this会直接指向当前点击的<a>元素：

td.innerHTML = `<a onclick="some_function(this, ${row_number}, 'extra_param')">click me</a>`;

⚠️ 注意：如果row_number是循环变量（比如用var声明），会导致所有点击都用最后一次的row_number值。这时候要么把循环变量改成let，要么用立即执行函数包裹参数：

// 用let声明循环变量（ES6+）
for (let row_number = 0; row_number < rows.length; row_number++) {
  td.innerHTML = `<a onclick="some_function(this, ${row_number}, 'extra_param')">click me</a>`;
  // ...其他代码
}

方法3：事件委托（适合大量行的场景） #

如果表格行数特别多，给每个<a>单独绑定事件会浪费性能，这时候用事件委托更高效——只在表格父元素上绑定一次事件：

1. 先给<a>标签加自定义data属性：

td.innerHTML = `<a href="#" data-row="${row_number}" data-extra="extra_param">click me</a>`;

2. 在表格的父元素（比如<tbody>）上统一监听点击：

document.querySelector('tbody').addEventListener('click', function(e) {
  if (e.target.tagName === 'A') {
    e.preventDefault(); // 阻止默认跳转行为
    const rowNum = e.target.dataset.row;
    const extraParam = e.target.dataset.extra;
    some_function(e.target, rowNum, extraParam);
  }
});

这种方式不仅性能更好，后续动态添加的表格行也能自动生效，不用重复绑定事件。

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