javascript中return false;preventDefault();stopPragation()的区别

主要内容：

区别的介绍
代码演示区别
建议

1. 区别的介绍

我们在平时的编码中javascript中经常会用到[return false;]语句来阻止事件的向上传递，其实[return false;]语句包含了2层意思：

阻止触发事件的元素的默认动作（比如说一个link(<a href="http://www/baidu.com"></a>)，它的默认动作就是迁移到baidu首页）
阻止触发事件的元素向上传递事件

由于[return false;]包含了2个意思，所以在使用时首先要明确上面的2个阻止是否符合我们的预期。

如果我们在只想阻止元素的默认动作或者只想阻止元素向上传递事件的情况下误用了[return false;]的话，

那么在大量的代码中就很难调试出问题的所在了。

在javascript中其实有相应的函数分别实现上面的2个阻止，分别是：

event.preventDefault() 阻止触发事件的元素的默认动作
event.stopPragation() 阻止触发事件的元素向上传递事件

2. 代码演示区别

下面分5种情况用代码演示[return false;], [preventDefault()], [stopPragation()]的区别。

html代码：

<!DOCTYPE>
<html xml:lang="zh" lang="zh">
    <head>
        <title>test js 事件阻止</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
        <script type="text/javascript" src="my.js"></script>
        <style type="text/css" media="screen">
          #parent{
          width:300px;
          height:300px;
          boder:1px;
          background-color:red;
          margin-left:auto;
          margin-right: auto;
          }
          #child{
          width:200px;
          height:200px;
          margin-left:auto;
          margin-right: auto;
          boder:1px;
          background-color:blue;
          }
        </style>
    </head>
    <body>
      <div id="parent">
          <div id="child">
            <a href="http://www.baidu.com" id="lnk">go to baidu!</a>
          </div>
      </div>
    </body>
</html>

情况一，不使用[return false;], [preventDefault()], [stopPragation()]

默认的my.js的代码如下：

// init
$(function(){
    $("#parent").bind('click', fun_p);
    $("#child").bind('click', fun_c);
    $("#lnk").bind('click', fun_a);

});

function fun_p()
{
    alert('parent');
}

function fun_c()
{
    alert('child');
}

function fun_a()
{
    alert('link');
}