Set order of mouse click events javascript -

i have 2 elements - parent , child. both have on click event handlers. if click on child element both event handlers run - parent's first child's (at least on chrome). don't know how browser determines order run events in, there way set order child's click event happens before parent's click event?

i have found lot of questions , answers regarding order of different events (mousedown, click, etc.), can't find regarding order of same event on different elements.

thanks in advance!

are sure parent's runs first? events bubble innermost element outermost element (your child click handler should trigger before parent). http://api.jquery.com/on/:

the majority of browser events bubble, or propagate, deepest, innermost element (the event target) in document occur way body , document element. in internet explorer 8 , lower, few events such change , submit not natively bubble

that said, if want behavior of parent element execute first following:

function runfirst(){     alert("i should run first");    }  function runsecond(){     alert("i should run second"); }  $('body').on('click', '.parent', function(){      runfirst();  }).on('click', '.child', function(event){      runfirst();     runsecond();      event.stoppropagation(); }); 

here's fiddle demonstrating behavior: https://jsfiddle.net/8fxout3d/1/