Avoid double event triggers on elements that share common space
<p>I am replicating some functionality from Google Reader where a table of entries is generated with a star that allows a user to highlight certain rows.  I also want the user to be able to click on the row to expand the entry.  To expand the row, my jquery reads:</p>

<pre><code>$(".action_row").click(function() {
    if( $(this).next().is(':hidden') ) {
        $(".detailed_row").hide();
        $(".selected-action").removeClass("selected-action");
        $("#current-action").removeAttr("id");
        $(this).next().toggle('fast').addClass("selected-action");
        $(this).addClass("selected-action").attr("id", "current-action");
    } else {
        $(".selected-action").removeClass("selected-action");
        $("#current-action").removeAttr("id");
        $(".detailed_row").hide();
    }
});
</code></pre>

<p>It's not really important what happens during the click, just that clicking .action-row triggers an event.</p>

<p>But inside each action-row is a star:</p>

<pre><code>$(".action-star").click(function() {    

    //Toggle the star through CSS
    $(this).toggleClass("star-checked");
    if ($(this).hasClass("star-checked")) {
        $(this).html("&lt;i class='icon-star icon-large'&gt;&lt;/i&gt;");
    } else {
        $(this).html("&lt;i class='icon-star-empty icon-large'&gt;&lt;/i&gt;");
    }               
});
</code></pre>

<p>If the user clicks on the star, I only want the star to be toggled.  However, right now, when the star is clicked, it triggers both the star toggle and the action_row event.</p>

<p>How should I alter the code so that the action_row code isn't used if the star is clicked?</p>
