在写JS函数时,我们经常用到return, return true, return false这三个返回语句,关于三者的区别总结如下:
1、返回函数结果
语法:return 表达式;
语句执行后,将表达式的值作为函数的执行结果。
2、返回控制
无函数结果,语法为:return;
3、防止默认的事件行为
在多数情况下,为事件处理函数设置返回值为false,可以防止默认的事件行为。例如,单击<a>元素后,默认页面会跳转到href属性指定的地址,return false则会阻止页面跳转。
return
在JS中,我们还经常用return false来阻止表单提交或继续执行下面的代码,如下:
function test(){
if(true){
......
return false;
}
}
但如果代码是下面这种情况:
function test2(){
a(){..... return false;};
b();
c();
}
即使a函数中的return false阻止提交了,但不影响b()与c()函数的执行。在test2()函数里调用a()函数,其内部的return false对于test2()函数来说,只是返回值,并不能阻止test2()的执行。
总之,return false只在当前函数有效,不会影响到其他外部函数的执行。
总结:
return
return
return: 把控制权返回给页面。
进一步深入补充:
刚开始接触jQuery时,容易养成使用return false来阻止浏览器的默认行为,但每次调用return false时,实际上是做了3件事:
* event.preventDefault();
* event.stopPropagation();
* 停止回调函数执行并立即返回。
所以我们实际只是想阻止默认行为,并未打算让它去做另外2件事。这3件事中用来阻止浏览器继续执行默认行为的只有preventDefault,除非你想要停止事件冒泡,否则使用return false会为你的代码埋下很大的隐患,让我们通过一个真实的例子来看看这样的误用会造成什么后果:
代码如下:
点击标题a时,弹出相应页面的内容。这段代码可以执行,并且没有任何错误。
但如果我想要在用户点击div.page(或者它的任何一个子元素)时,给它添加一个active类(字体变为红色),我就需要给div.page添加一个click回调函数,代码如下:
现在,我们点击一个标题,这段代码还会工作吗?答案是不会。因为我们在标题的click回调里使用了return false而不是我们应该使用的,return false等于event.preventDefault();加event.stopPropagation();,所以事件冒泡就被终止了,click事件不会被冒泡到div.page上,为它添加的事件回调也就不会被调用了。
如果我们把它和bind/live/delegate事件混在一起使用时,情况更为糟糕:
那么我们应该怎么做呢?
1. preventDefault()
大多数情况下,当你使用return false时,你其实真正需要的是e.preventDefault()。要使用e.preventDefault,你需要确保你传递了event参数到你的回掉函数中(在这个例子里,就是那个e):
它会替我们完成所有工作,但不会阻止父节点继续处理事件,要记住,你放在代码中的限制越少,你的代码就越灵活,也就越易于维护。
2. stopPropagation()
在有些情况下,你有可能需要停止事件冒泡,例子如下:
在这种情况下,如果我们使用return false,div的click事件不会被触发,但是用户也不会到达他们点的那个链接。
3. return false
只有当你同时需要preventDefault和stopPropagation,并且你的代码可以接受直到你的回调执行完成才停止执行浏览器的默认行为,那你就可以使用return false。但我强烈建议你别在写给其它jQuery开发者的演示代码中使用这个方法,因为这会造成更多误用,只有在你确信非用不可的情况下再去使用return false。
如果使用了return false,它只会在你的回调函数执行结束才去取消浏览器的默认行为,但是使用e.preventDefault,我们有更多的选择,它可以随时停止浏览器执行默认动作,而不管你将它放在函数的哪个部分。不必非得是函数的第一行,但是越早越好,这里的原则是:如果函数的功能是通过JS实现的(不涉及服务端交互),那就没必要考虑兼容,在这种情况下,添加在第一行可以防止URL中出现#字符,但显然,你还是应该尽可能多的增加些错误处理代码,以防止用户在出错时变得不知所措。
结论:
这次补充,也是因为实际中碰到了这类问题,希望能在需要阻止浏览器执行默认行为时做出正确的选择。记住,只有当你真的明白你在做什么时,才使用return false,并确保你是在函数的正确位置调用了相应的代码。最后,尽可能保持代码的灵活性,尽量不要再用return false!