break; continue; return; return false; e.stopPropagation(); e.preventDefault();的联系

阻止循环与阻止事件在我们的工作经常会遇到，如果不能明白其中各自的用法和意义的话，会造成通篇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

break; continue; return; return false; e.stopPropagation(); e.preventDefault();的联系

猜你喜欢