阻止循环与阻止事件在我们的工作经常会遇到,如果不能明白其中各自的用法和意义的话,会造成通篇return false
的尴尬局面,所以今天我就来说一说这些阻止语句各自的意义。
一 . 先来说说跳出循环的break和continue以及return
- break:跳出一层循环
如果有多层for循环,break会跳出当前这一层,去执行最外层循环,而不是退出所有层循环; - continue:结束一次循环
而continue则结束当前次循环(继续)而去执行下次循环,但本层循环没有结束.(注意一层循环和一次循环的区别:一层循环包含若干(i)次循环) - return :结束所有层的循环
打个比方,如下:
test();
function test() {
for (var i = 0; i < 5; i++) {
if (i == 3) {
// break; //i=3的时候结束这一层for循环
// continue; //i=3的时候结束这一次的循环,继续执行i=4的循环
return;// 直接结束整个函数
}
console.log("----" + i);
}
console.log("-111--");
}
如果是break,答案是:—-0,—-1,—-2,-111–
如果是continue,答案是:—-0,—-1,—-2,—-4,-111–
如果是return,答案是:—-0,—-1,—-2
原因如上注释,不必多说
二 . 然后来说说终止事件的return false和e.stopPropagation()以及e.preventDefault()
- stopPropagation() :阻止事件冒泡
- e.preventDefault() :阻止事件默认行为
- return false :等同于同时调用e.preventDefault()和e.stopPropagation()
打个比方,如下:
1.栗子1
本来是事件冒泡的,即 span alert -> td alert -> table alert,但加了e.stopPropagation()后,就只span alert了,阻止了其父节点的动作
$(function () {
$("table").click(function () { alert("table alert"); });
$("td").click(function () { alert("td alert"); });
$("span").click(function (e){
alert("span alert");
e.stopPropagation();
});
});
2.栗子2
本来a是一个链接标签,点击应该是链接跳转的,但是因为被阻止了默认行为,所以不进行链接跳转了
$("a").click(function (e) {
alert("默认行为被禁止喽");
e.preventDefault();
});
<a href="http://www.baidu.com">测试</a>
3.栗子3
if (ret===false){
//这两者加起来就相当于return false;
event.preventDefault();
event.stopPropagation();
}
ok,over,perfect