为什么使用jQuery返回false停止传播而不使用POJS？

Question

这是一个使用POJS的jsfiddle显示return false;不会阻止事件的传播:http://jsfiddle.net/Ralt/Lz2Pw/

这是另一个使用jQuery显示return false; 确实停止事件的传播:http://jsfiddle.net/Ralt/D5Mtg/

编辑:向我解释为什么jQuery这样做 - 有意地与原始行为不同 - (以及代码中的位置)得到答案.

这是代码(很长,但很容易阅读):

• 两个版本的HTML:

  <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版本:

  $( '#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

在版本1.7.1的第3331行,在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();
    }
}

很多包装都发生在这一行之前,但基本上,它运行处理函数(原始函数或a的handlermemeber函数handlerObject)使用apply.如果该调用的结果为false,则确实为preventDefault和stopPropagation.

这在文档中提到on():

false从事件处理程序返回将自动调用event.stopPropagation()和event.preventDefault().

至于为什么他们这样做了？我不知道,因为我不是jQuery设计团队,但我认为这只是因为return false键入的速度要快得多event.preventDefault(); event.stopPropagation();.(如果jQuery不是为了确保你输入更少,我不确定它是什么.)

我不相信事件处理程序的返回值实际上是在POJS中的任何地方实际使用的(如果这是错误的话,有人会更正!).因此,jQuery可以安全地使用return语句导致处理程序中的副作用(因为在POJS处理程序中返回false是没有意义的,不会损害POJS功能).