[jQuery] Preventing certain child elems triggering a parent event

[Gordon]

I'm adding a feature to a table where it can have a compact r a
verbose display.  When in compact mode a class is added to the table
causing various various elements in the table cells to match a CSS
rule to set them display: none.

I want to be able to expand individual rows by clicking to them so I
added a live event handle to the rows that causes the row to have a
class added when clicked.  With more stylesheet rules I can restore
the full view to just the clicked table row.

The problem is that the rows contain elements that are supposed to do
things when clicked (hyperlinks, mailto:links, form inputs etc) and I
want to ignore clicks that happen on these child elements.  There are
also child elements that otherwise don't do anything when clicked,
paragraphs, images, etc and I want them to trigger the parent
element's click behaviour.  Things are complicated further by things
like having images, some of which are in hyperlinks or forms.  If the
image is inside an interactive element (hyperlink, form, etc) then
clicking it should not trigger the expand/collapse behaviour.  If the
image is not part of an interactive element (paragraph, list item,
etc) then it should trigger the expand/collapse behaviour.

My Javascript code is as follows:

function clickRow (evt)
{
        //console.log (this);
        //console.log (evt);
        switch (evt.target.tagName)
        {
                case 'A'                :
                case 'INPUT'    :
                case 'IMG'              :
                break;
                default :
                        $('.browserList tr').not (this).removeClass ('hover');
                        $(this).toggleClass ('hover');
                break;
        }
}


$(function ()
{
        $('#fullView').click (function ()
        {
                var image       = $('img', this);
                if ($('.browserList').hasClass ('compact'))
                {
                        //$(this).text ('-');
                        image.attr ('src', '/ui/icons/zoom_out.png');
                        $('.browserList').removeClass ('compact');
                        $('.listRows tr').removeClass ('hover').die ('click', 
clickRow);
                }
                else
                {
                        //$(this).text ('+');
                        image.attr ('src', '/ui/icons/zoom_in.png');
                        $('.browserList').addClass ('compact');
                        $('.listRows tr').removeClass ('hover').live ('click', 
clickRow);
                }
                return (false);
        });
});

An example table row looks like this:

<tr class="even">
  <td class="sort roundLeft"><ul class="sortGroup">
      <li class="up">
        <form method="post" action="sort.php" id="cmsSortUp_2258">
          <div>
            <input type="hidden" value="2258" name="itm_id"/>
            <input type="hidden" value="-1" name="sort"/>
            <input type="image" src="/ui/icons/arrow_up.png"
title="Sort Up" alt="Sort Up"/>
          </div>
        </form>
      </li>
      <li class="down">
        <form method="post" action="sort.php" id="cmsSortDown_2258">
          <div>
            <input type="hidden" value="2258" name="itm_id"/>
            <input type="hidden" value="1" name="sort"/>
            <input type="image" src="/ui/icons/arrow_down.png"
title="Sort Down" alt="Sort Up"/>
          </div>
        </form>
      </li>
    </ul></td>
  <td class="itemInfo CmsSurvey"><ul>
      <li class="title">
        <h2><a href="viewitem.php?itm_id=2258">Test 2</a></h2>
        <ul class="ctrlGroup">
          <li> <a href="viewitem.php?itm_id=2258"><img width="16"
height="16" src="/ui/icons/magnifier.png" title="Preview"
alt="Preview"/></a> </li>
          <li> <a href="iteminfo.php?itm_id=2258"><img title="Info"
alt="Info" src="/ui/icons/information.png"/></a> </li>
        </ul>
      </li>
      <li class="filename">test_2.php</li>
      <li class="summary noSummary">No summary!</li>
    </ul></td>
  <td class="userInfo"><ul>
      <li class="editor">
        <h2><a href="mailto:t...@example.com";>Tim Bisley</a></h2>
      </li>
      <li class="editDate">26 Mar 2009 - 10:38</li>
      <li class="userEdit">
        <ul class="ctrlGroup">
          <li><img src="/ui/icons/user_edit.png"/></li>
          <li><img src="/ui/icons/group_edit.png"/></li>
        </ul>
      </li>
    </ul></td>
  <td class="controls roundRight"><ul class="ctrlGroup">
      <li><a href="editsurvey.php?itm_id=2258" class="cmsControl"><img
width="16" height="16" src="/ui/icons/application_form_edit.png"
title="Edit Survey Questions" alt="Edit Survey Questions"/></a></li>
      <li><a href="editdoc.php?itm_id=2258"><img width="16"
height="16" src="/ui/icons/page_edit.png" title="Edit" alt="Edit"/></
a></li>
      <li> <a href="itemoptions.php?itm_id=2258"
class="cmsControl"><img width="16" height="16" src="/ui/icons/
cog_edit.png" title="Options" alt="Options"/></a></li>
      <li>
        <form method="post" action="publish.php" id="cmsPub_2258"
class="cmsPub">
          <div>
            <input type="hidden" value="2258" name="itm_id"/>
            <input type="image" src="/ui/icons/tick.png"
title="Publish" alt="Publish" id="cmsButPub_2258" class="cmsButPub"/>
          </div>
        </form>
      </li>
    </ul>
    <ul class="ctrlGroup supplemental">
      <li><a href="itemoptions.php?itm_id=2258#moveItem"
class="cmsControl"><img width="16" height="16" src="/ui/icons/
page_go.png" title="Move" alt="Move"/></a></li>
      <li><a href="itemoptions.php?itm_id=2258#copyItem"
class="cmsControl"><img width="16" height="16" src="/ui/icons/
page_copy.png" title="Copy" alt="Copy"/></a></li>
      <li/>
      <li>
        <form method="post" action="trashitem.php">
          <div>
            <input type="hidden" value="2258" name="itm_id"/>
            <input type="image" src="/ui/icons/bin.png" title="Delete"
alt="Delete"/>
          </div>
        </form>
      </li>
    </ul></td>
</tr>