JQuery 1.3.2 - Best way to prevent events from firing on lower elements?

Question

I have this (simplification):

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

<li>
   <input>
</li>

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

Answer 1

Try using the stopPropagation method of the Event object.

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

You can also target specific children (or direct children) liusing a combination of selectors:

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

Answer 2

In one solution can be used event.target.

In the event handler, use

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

Answer 3

, .

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