为什么使用jQuery返回false停止传播而不使用POJS？ [英] Why does returning false stop propagation with jQuery while it doesn't with POJS?

问题描述

这是一个使用POJS的jsfiddle，显示返回false; 不会停止事件的传播： http://jsfiddle.net/Ralt/Lz2Pw/

Here is a jsfiddle using POJS showing that return false; doesn't stop the event's propagation: http://jsfiddle.net/Ralt/Lz2Pw/

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

Here is another using jQuery showing that return false; does stop the event's propagation: http://jsfiddle.net/Ralt/D5Mtg/

编辑：向我解释为什么jQuery会这样做 - 故意与原始行为不同 - （以及代码中的位置）得到答案。

The one explaining to me why jQuery does this - differing from the original behavior intentionally - (and where in the code) gets the answer.

这是代码（很长，但很容易阅读）：

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

• 两个版本的HTML：

• 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：

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

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

推荐答案

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

在这一行之前发生了很多包装，但是基本上，它使用<运行处理函数（原始函数或处理程序 handlerObject 的memeber函数） code>应用。如果该调用的结果为false，则执行 preventDefault 和 stopPropagation 。

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

on（） ：

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

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

As for why they did it? I don't know, as I'm not not the jQuery design team, but I assume it's just because return false is a lot quicker to type than event.preventDefault(); event.stopPropagation();. (And if jQuery isn't about making sure you have less to type, I'm not sure what it's about.)

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

I don't believe the return value of an event handler is ever actually used anywhere in POJS (someone correct if that's wrong!). Thus, jQuery can safely have a return statement cause side effects in a handler (since returning false in a POJS handler is meaningless, no POJS functionality is harmed).

这篇关于为什么使用jQuery返回false停止传播而不使用POJS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！