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

Why does returning false stop propagation with jQuery while it doesn't with POJS?

本文关键字：POJS 传播 jQuery 返回 为什么 false      更新时间：2023-09-26

这是一个使用 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' );
};

  • j查询版本：

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

在 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();
    }
}

在这一行之前已经发生了很多打包，但基本上，它使用 apply 运行处理程序函数(原始函数或handlerObject的 handler 成员函数(。 如果该调用的结果为 false，则preventDefault并stopPropagation 。

这在on()文档中提到：

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

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

我不相信事件处理程序的返回值实际上在 POJS 的任何地方使用过(如果这是错误的，有人纠正！ 因此，jQuery可以安全地让return语句在处理程序中引起副作用(因为在POJS处理程序中返回false是没有意义的，因此不会损害POJS功能(。

相关文章：