Avoid double event triggers on elements that share common space

Question

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:

$(".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();
    }
});

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

But inside each action-row is a star:

$(".action-star").click(function() {    

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

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.

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

score 1 · Accepted Answer · edited May 23 '17 at 12:20

1

read about stopPropagation() and stopImmediatePropagation()

It seems the event is bubbling up from the star to the action-row which is causing you undesired affects.

jquery: stopPropagation vs stopImmediatePropagation

$(".action-star").click(function(e) {    
    e.stopPropagation(); // <-- top stop events from bubbling up
    //Toggle the star through CSS
    $(this).toggleClass("star-checked");
    if ($(this).hasClass("star-checked")) {
        $(this).html("<i class='icon-star icon-large'></i>");
    } else {
        $(this).html("<i class='icon-star-empty icon-large'></i>");
    }               
});

edited May 23 '17 at 12:20

Community

1
1

answered Aug 16 '12 at 17:58

wirey00

33,517
7
54
65

Great. But what is the guarantee that action-star fires first? Is that definite because it's "on top"? – Ed. Aug 16 '12 at 18:10
1

You said `action-star` is inside `action-row`.. so events bubbles up- by using `stopPropagation`, it stops the event from bubbling up to `action-row` which will prevent the click event on `action-row` from happening when you click on the `action-star` – wirey00 Aug 16 '12 at 18:12

Avoid double event triggers on elements that share common space

1 Answers1