jQuery 1.3.2 - Best way to prevent events triggering on lower elements?

Question

I have this (simplification):

$(li).click(function{alert("test");});

<li>
   <input>
</li>

What's the best way to bind an event to li but not fire when the user clicks on the input element?

Answer 1

One solution could involve using event.target.

In the event handler, use

if( $(event.target).is('input') )
    return;

Answer 2

I think you'll have to manually filter it.

$(li).click(function(e) {
    if ($(e.target).is("input")) {
        alert("Test");
    }
});

Answer 3

Try using the stopPropagation method on the Event object.

$('input').click(function(event) {
    event.stopPropagation();
});

You could also target specific children (or direct children) of li using a combination of selectors:

$('li > input, li strong, li span').click( ... );