javascript - DOM/jQuery events propagation differences between input types -


as know, returning false dom event handler stop propagation of event. discovered behavior of different elements varies respect event. example, consider 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> 

the surrounding container has click handler returns false:

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

within div, can still click on text box , enter text, , can still click on dropdown change value. clicking on checkbox nothing (actually, that's not quite true - checks box, fires handler, unchecks it). jsfiddle here: http://jsfiddle.net/4ncaq/

this behavior consistent across browsers assume it's design. rule that's @ work here? how can know how other kinds of elements might behave in type of scenario?

when click element, event continue propagating event until handler decides cancel propagation. in case, when click checkbox, raise event <input> first , propagate #container stopping propagation.

if want cancel propagation input elements such checkboxes or textareas should bind click event , stop propagation @ point.

edited

return false cancels default action original target element. checkboxes, links, radio buttons of elements default click action cancelable. default action click event in checkbox toggles value of checkbox while there no default click action select means not cancelled.

i've tried find list of default actions without luck can check links @ is there standard resource "default action" of html elements?.


Comments

Popular posts from this blog

jasper reports - Fixed header in Excel using JasperReports -

media player - Android: mediaplayer went away with unhandled events -

python - ('The SQL contains 0 parameter markers, but 50 parameters were supplied', 'HY000') or TypeError: 'tuple' object is not callable -