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

【问题标题】：Table Row's OnClick Event is Propagated to all Contained Elements?表行的 OnClick 事件传播到所有包含的元素？
【发布时间】：2011-07-12 16:11:28
【问题描述】：

我在 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，请不要拍信使。）

【问题讨论】：

标签： javascript internet-explorer dom dom-events dhtml

【解决方案1】：

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

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

如果你真的只需要这样做的话。

【讨论】：