javascript中return false;preventDefault();stopPragation()的区别-阿里云开发者社区

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

2017-10-17 1558

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

主要内容：

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

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');
}