Question

So I do:

    $('.divs').bind('click', function()
    {
         console.log("clicked " +$(this).text());
    }

On:

    <DIV class="divs" id="parent1">Dad
      <DIV class="divs" id="child1">Kid1</DIV>
      <DIV class="divs" id="child2">Kid2</DIV>
    </DIV>

Then I get multiple outputs when I click on child1, like:

“clicked Kid1”

“clicked DadKid1Kid2”

on my console

Only when I click on the ‘most parent’ div i get a single output.
This is all pretty logical, but I’d like to only select the ‘most child’-ish one only?

Answer 1

Stop the propagation of the click event by using event.stopPropagation.

$('.divs').bind('click', function(event)
{
     event.stopPropagation();
     console.log("clicked " +$(this).text());
});

Notice I added event as an argument for the event handler anonymous function.

When you click an element it fires a click event, then that event bubbles up the DOM all the way to the document element, triggering a click event on each ancestor element from the original target to the document element. We can stop this event propagation however.

You can also return false; which in a jQuery Event Handler will event.preventDefault() and event.stopPropagation().

$('.divs').bind('click', function()
{
     console.log("clicked " +$(this).text()); 
     return false;
});

Some documentation for ya:

• event.stopPropagation(): http://api.jquery.com/event.stoppropagation
• event.preventDefault(): http://api.jquery.com/event.preventdefault

Here is a demo: http://jsfiddle.net/P5tXP/