Question

我在Internet Explorer下运行的遗留应用程序中遇到了一些有趣的代码。请考虑以下事项：

<script type="text/javascript">
  function selectRow()
  {
    var src = window.event.srcElement; // Array of OPTION?!
    var rowIndex = src.rowIndex; // Undefined for an OPTION element
    highlightRow(rowIndex);
  }
</script>
<table>
  <tr onclick="selectRow();">
    <td>
      <select id="foo">
        <option value="baz">baz</option>
      </select>
    </td>
  </tr>
</table>

所以，这就是我难倒的地方。当用户从SELECT元素中选择一个项目时，ONCLICK事件将被触发，并且以下情况属实：

'this'评估为'Window'
'Window.event.srcElement'计算为'OPTION'元素数组
似乎没有办法从事件处理程序中获取选项的父元素。

我需要能够获取被单击的表行的索引。（从上面的示例中可以看出，遗留代码错误地假定this.rowIndex计算表的当前行索引。）

我假设这里的罪魁祸首是事件冒泡。

我愿意以最正确的方式纠正这个问题。我发现它可能是事件绑定在行上的方式，但我有点怀疑它（因为事件仍会冒泡）。

（FWIW，我没有在任何其他浏览器下试过这个，因为我们公司只支持IE。请不要拍摄信使。）

Answer 1

您是否遗漏了样本中的一些额外复杂性？因为为什么不只是：

<tr onclick="highlightRow(this.rowIndex);">

如果真的只需要用它做的话。

表行的OnClick事件是否传播到所有包含的元素？

1 个答案: