title: Table Row's OnClick Event is Propagated to all Contained Elements?
body: <p>I've run into some interesting code in our legacy application running under Internet Explorer. Consider the following:</p>
  <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
    function selectRow()
    {
      var src = window.event.srcElement; // Array of OPTION?!
      var rowIndex = src.rowIndex; // Undefined for an OPTION element
      highlightRow(rowIndex);
    }
  &lt;/script&gt;
  &lt;table&gt;
    &lt;tr onclick=&quot;selectRow();&quot;&gt;
      &lt;td&gt;
        &lt;select id=&quot;foo&quot;&gt;
          &lt;option value=&quot;baz&quot;&gt;baz&lt;/option&gt;
        &lt;/select&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  <p>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:</p>
  <ul>
  <li><code>this</code> evaluates to <code>Window</code></li>
  <li><code>Window.event.srcElement</code> evaluates to an array of 'OPTION' elements</li>
  <li>There doesn't seem to be a way to get to the parent element of the options from within the event handler.</li>
  </ul>
  <p>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 <code>this.rowIndex</code> evaluates to the table's current row index.)</p>
  <p>I'm assuming that the culprit here is <em>event bubbling</em>.</p>
  <p>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).</p>
  <p>(FWIW, I have not tried this under any other browsers, since our company only supports IE. Please don't shoot the messenger.)</p>