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
Post a Comment