如何阻止浏览器默认事件和事件冒泡和捕获行为

//图片如下:

<style>
    #box{
        width: 600px;
        height: 600px;
        background: red;
    }
    #box1{
        width:400px;
        height: 400px;
        background: green;
    }
    #box2{
        width: 200px;
        height: 200px;
        background: blue;
    }
</style>

<div id="box">
    <div id="box1">
        <div id="box2">

        </div>
    </div>
</div>
<a href="http://www.baidu.com">百度</a>

<script>
    // //捕获：和冒泡相反 从最不具体的元素接收到最具体的元素 会从祖级层层往下找(外往里找) box box1 box2
    //冒泡:一个元素接收到事件的时候会把它接收的事件传给它的父级元素 一直到window（里往外找）box2 box1 box
    //事件捕获阶段查找到的目标 就是事件目标阶段。

    /*
    onclick 单击事件同样具有冒泡事件.点击box2: box2 box1 box
    */
    box2.onclick=function(e) {//使用形参e
        //兼容性 判断
        if(e.stopPropagation){
            e.stopPropagation();//使用这个兼容
        }else {
            e.cancelBubble=true;//使用IE兼容
        }
        alert("box2被单击了")
    };
    box1.onclick=function(e) {//使用形参e
        if(e.stopPropagation){
            e.stopPropagation();//使用这个兼容
        }else {
            e.cancelBubble=true;//使用IE兼容
        }
        alert("box1被单击了")
    };
    box.onclick=function() {
        alert("box被单击了")
    };
    /*--------------------------------------------*/
    /*
    阻止事件冒泡的行为:event对象
    阻止事件冒泡、捕获行为:如下
    W3C：e.stopPropagation(),IE:e.cancelBubble=true;
        if(e.stopPropagation){//兼容性判断
            e.stopPropagation();//使用这个兼容
        }else {//老版本IE的兼容
            e.cancelBubble=true;//使用IE兼容
        }
        对于现在的IE只需要 e.stopPropagation();即可
    */
    /*----------------------------------------------*/
    /*
    阻止浏览器默认行为:
     document.οncοntextmenu=function(){
          return false;//阻止默认行为;
          W3C的方法:e.preventDefault();
          IE的使用是:e.returnValue=false;
     }
    */
    //阻止浏览器默认的上下文菜单控制事件:contextmenu
    document.oncontextmenu=function(e) {//0级事件 传形参e
        var e=e||window.event;//老式IE的兼容语句
        if(e.preventDefault){
            e.preventDefault();//w3c的兼容语句
        }else {
            e.returnValue=false;//ie的兼容语句
        }
    };
   /*------------------可自定义上下文菜单的样式------------*/

    //阻止浏览器的跳转行为:
    var a=document.getElementsByTagName("a")[0];
    a.onclick=function() {
       return false;//通用兼容语句
    }
</script>