javascript event.preventDefault() 与return false区别实例分析

event.preventDefault() 和 return false 都可以终止程序，二者有什么异同点？

为了彻底弄清楚它们之间的区别，我不得不要先说一下javascript中两种事件传播模式:

- 捕获模式(capturing)
- 冒泡模式(bubbling)

捕获模式又称为“滴流模式”(trickling)，个人认为滴流模式更好理解，滴流就是“从上向下”，而冒泡就是“从下向上”，好了，先记住这两种模式的特点。

同时你还要记住，这两种模式是为了干什么的？

这两种模式就是为了一点：决定html中“元素”(比如div, p, button)接收到事件的“顺序”！当然接收到事件的顺序不同，自然事件监听函数被触发的顺序就不同了，于是间接地就出现了监听函数被执行顺序的不同。

说一下事件传送机制就可以明白了

事件传递机制：

例如鼠标被按下后，mousedown事件被触发。

事件先从document->ancestor element->...->parent->event.target(在此元素上按下的鼠标)->parent->...->ancestor element->document.

事件走了一个循环(从documet到event.target再回到document)，从documet到event.target的过程叫做捕获模式，从event.target到document的过程叫做冒泡模式。

下面我们再来了解一下e.preventDefault() e.stopPropagation()和return false的区别

event.stopPropagation(); 事件停止冒泡到，即不让事件再向上传递到document，但是此事件的默认行为仍然被执行，如点击一个链接，调用了event.stopPropagation()，链接仍然会被打开。
event.preventDefault(); 取消了事件的默认行为，如点击一个链接，链接不会被打开，但是此事件仍然会传递给更上一层的先辈元素。
return false; 相当于同时调用了event.stopPropagation()和event.preventDefault()，事件的默认行为不会被执行，事件也不会冒泡向上传递。

实例讲解：

假如有这样一个页面：

<!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>
        $(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');
        }
    </head>
    <body>
      <div id="parent">
          <div id="child">
            <a href="http://www.manongjc.com" id="lnk">码农教程</a>
          </div>
      </div>
    </body>
</html>