这是一个使用POJS的jsfiddle,它显示return false;
不会阻止事件的传播:http://jsfiddle.net/Ralt/Lz2Pw/
这是另一个使用jQuery的示例,它显示return false;
确实阻止了事件的传播:http://jsfiddle.net/Ralt/D5Mtg/
编辑:一位向我解释为什么jQuery这样做的原因-与原始行为有意不同-(以及代码中的位置)得到了答案。
这是代码(很长,但是很容易阅读):
两种版本的
<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>
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' );
};
$( '#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
运行处理程序函数(原始函数或handlerObject
的apply
memeber函数)。如果该调用的结果为false,则为preventDefault
和stopPropagation
。在
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/