javascript - 为什么使用 jQuery 返回错误会停止传播，而 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();
    }
}

在这一行之前发生了很多打包，但基本上，handler它handlerObject使用apply. 如果该调用的结果是假的，它确实preventDefault和stopPropagation。

这在文档中提到on()：

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

至于他们为什么这么做？我不知道，因为我不是 jQuery 设计团队，但我认为这只是因为它return false比event.preventDefault(); event.stopPropagation();. （如果 jQuery 不是为了确保您输入的内容更少，我不确定它是关于什么的。）

我不相信事件处理程序的返回值实际上在 POJS 中的任何地方都使用过（如果错了，请指正！）。因此，jQuery 可以安全地return在处理程序中使用导致副作用的语句（因为在 POJS 处理程序中返回 false 是没有意义的，因此不会损害 POJS 功能）。