这是一个使用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' );
    });
    
  • 最佳答案

    version 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运行处理程序函数(原始函数或handlerObjectapply memeber函数)。如果该调用的结果为false,则为preventDefaultstopPropagation

    on() 的文档中提到了这一点:



    至于为什么这样做呢?我不知道,因为我不是jQuery设计团队,但我认为这只是因为return false的键入速度比event.preventDefault(); event.stopPropagation();快得多。 (而且,如果jQuery并不是要确保您键入的内容更少,那么我就不确定它的含义。)

    我不相信事件处理程序的返回值实际上从未在POJS中的任何地方使用过(如果那是错的,请改正!)。因此,jQuery可以安全地使return语句在处理程序中引起副作用(因为在POJS处理程序中返回false是没有意义的,因此不会损害POJS功能)。

    关于javascript - 为什么用jQuery而不用POJS返回错误停止传播?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/10452032/

    10-10 03:54
    查看更多