Table Row’s OnClick Event is Propagated to all Contained Elements?

I’ve run into some interesting code in our legacy application running under Internet Explorer. Consider the following:

<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>

So, here’s where I’m stumped. When the user selects an item from the SELECT element, the ONCLICK event is firing, and the following are true:

this evaluates to Window
Window.event.srcElement evaluates to an array of ‘OPTION’ elements
There doesn’t seem to be a way to get to the parent element of the options from within the event handler.

I need to be able to get the index of the table row that was clicked. (As you can see from the sample above, the legacy code incorrectly assumes that this.rowIndex evaluates to the table’s current row index.)

I’m assuming that the culprit here is event bubbling.

I’m open to suggestions for correcting this problem in the most correct manner. It occurs to me that it could be the way the event is bound on the row, but I kind of doubt it (since the event would still bubble).

(FWIW, I have not tried this under any other browsers, since our company only supports IE. Please don’t shoot the messenger.)

Answer

Are you missing some additional complexity in your sample? Because why not just:

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

if that’s really all you need to do with it.

Advertisement

Answer