Why does it return a false cessation of distribution using jQuery until it is associated with POJS?

Question

Here is a jsfiddle example using POJS showing that return false; does not stop event propagation: http://jsfiddle.net/Ralt/Lz2Pw/

Here is another jQuery example showing that return false; makes an event propagation stop: http://jsfiddle.net/Ralt/D5Mtg/ p>

Edit: Anyone who explains to me why jQuery does this is intentionally different from the original behavior - (and where in the code) gets the answer.

Here is the code (long but very easy to read):

• HTML for both versions:

   <div id="parent1"> <div id="child1"><a href="#" id="a1">child1</a></div> </div> <div id="parent2"> <div id="child2"><a href="#" id="a2">child2</a></div> </div> <div id="parent3"> <div id="child3"><a href="#" id="a3">child3</a></div> </div> 

• POJS:

   document.getElementById( 'child1' ).onclick = function( e ) { console.log( 'child1' ); e.preventDefault(); }; document.getElementById( 'parent1' ).onclick = function( e ) { console.log( 'parent1' ); }; document.getElementById( 'child2' ).onclick = function( e ) { console.log( 'child2' ); return false; }; document.getElementById( 'parent2' ).onclick = function( e ) { console.log( 'parent2' ); }; document.getElementById( 'child3' ).onclick = function( e ) { console.log( 'child3' ); e.stopPropagation(); }; document.getElementById( 'parent3' ).onclick = function( e ) { console.log( 'parent3' ); }; 

• JQuery version:

   $( '#child1' ).click( function( e ) { console.log( 'child1' ); e.preventDefault(); }); $( '#parent1' ).click( function( e ) { console.log( 'parent1' ); }); $( '#child2' ).click( function( e ) { console.log( 'child2' ); return false; }); $( '#parent2' ).click( function( e ) { console.log( 'parent2' ); }); $( '#child3' ).click( function( e ) { console.log( 'child3' ); e.stopPropagation(); }); $( '#parent3' ).click( function( e ) { console.log( 'parent3' ); }); 

Answer 1

On line 3331 version 1.7.1 in jQuery.event.dispatch :

 ret = ( (jQuery.event.special[ handleObj.origType ] || {}).handle || handleObj.handler ) .apply( matched.elem, args ); if ( ret !== undefined ) { event.result = ret; if ( ret === false ) { event.preventDefault(); event.stopPropagation(); } } 

There was a lot of packaging before this line, but basically it runs the handler function (either the raw function or the memeber handler handlerObject ) using apply . If the result of this call is false, it performs preventDefault and stopPropagation .

This is mentioned in the documentation for on() :

Returning false from the event handler will automatically call event.stopPropagation() and event.preventDefault() .

Why did they do it? I don’t know, since I am not a jQuery development team, but I assume that only return false much faster to type than event.preventDefault(); event.stopPropagation(); event.preventDefault(); event.stopPropagation(); . (And if jQuery isn't about having less to print, I'm not sure what that means.)

I do not believe that the return value of the event handler is really used everywhere in POJS (someone is right if it's wrong!). Thus, jQuery can safely cause the return cause side effects in the handler (since returning false in the POJS handler is pointless, no POJS function will suffer).