Differences in DOM / jQuery event propagation between input types

Question

As you know, returning false from the DOM event handler will stop the propagation of the event. But I recently discovered that the behavior of different elements varies with this event. For example, consider the following:

 <div id="container"> <input type="checkbox" name="foo" value="1" /> Check me! <br /> <select> <option>1</option> <option>2</option> <option>3</option> </select> <br /> <input type="text" size="30" /> </div> 

There is a click handler in the surrounding container that returns false:

 $('#container').click(function(e) { $('#clicks').append('<span>clicked</span>'); return false; });​ 

Inside the div I can still click on the text field and enter the text and still click on the drop-down list to change its value. But clicking on the flag does nothing (in fact, this is not entirely true - it checks the window, starts the handler, and then removes it). jsfiddle here: http://jsfiddle.net/4ncaq/

This behavior is consistent across browsers, so I assume it is by design. But what exactly is the rule that works here? How can I find out how other types of elements can behave in this type of script?

Answer 1

When you click on an element, the event will continue to distribute the event until some handler decides to cancel the distribution. In this case, when you click this checkbox, it will first raise an event for <input> , and then propagate to #container , where you stop the distribution.

If you want to cancel distribution from input elements such as checkboxes or text fields, you must attach them to the click event and stop distribution at this point.

Edited

return false also cancels the default action for the original target element. Flags, links, radio buttons are some of the elements in which the click action is canceled by default. The default action for the click event in the flag toggles the value of the flag until the default action for the selection is performed, which means that it is not canceled.

I tried to find the default action list with no luck, but you can check the links to Is there a standard resource for the "default" action? HTML elements? .

Answer 2

What you see is the distribution, the event bubble in the DOM, so when you click on your checkbox, it actually fires the click event on the #container (as well as any events that you might have associated with the input or other parent elements).

Using return false, as this is ambiguous, because it does three things at once, when you most likely want it to be done. It prevents default functionality, stops distribution, and stops further execution.

It is best practice to be specific and use methods from the event object to prevent the default action or stop bubbling.

event.preventDefault () will stop actions such as loading href from a snap click, stopping the check box from checking, etc.

event.stopPropagation () cancels the distribution, this is useful for situations like your example - http://jsfiddle.net/4ncaq/1/

Another problem with return false is that it cannot be executed, a common error that I see people doing in jQuery has a click event anchored with the request $ .ajax (), followed by return false to stop browser from loading the linked page. In this case, if there is an error emanating from ajax () (not a response error, a jQuery error is usually a parameter with an error or something else), it will never hit return false; and the browser will load the linked page. Using e.preventDefault () completely fixes this problem.