理解阻止浏览器默认事件和事件冒泡cancelBubble

一、阻止浏览器默认事件

1、先举个例子说什么是　　浏览器的默认事件：

比如有一个输入框，当我按下字母a，就会在输入框显示字母a。就是浏览器本该发生的事情。小孩子一出生就会汲取母乳一样的道理，这些都是先天，默认好的了。

2、看个demo，阻止浏览器默认的右键弹出菜单，而且弹出自己自定义的菜单。代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
        #div1
        {
            width:100px;
            height: 100px;
            list-style: none;
            background: #ccc;
            display: none;

            position: absolute;
        }
        </style>
        <script type="text/javascript">
        /*在鼠标按下位置弹出菜单*/
        window.oncontextmenu = function(evt)
        {
            var oDiv = document.getElementById('div1');
            
            var oEvt = evt || event;

            oDiv.style.display = 'block';
            oDiv.style.left = oEvt.clientX +'px';
            oDiv.style.top = oEvt.clientY +'px';

            return false;                   //阻止浏览器默认事件
         
            document.onclick=function ()                      //当再点击时，设置div1为none
            {
                var oDiv=document.getElementById('div1');
                oDiv.style.display='none';
            };
        }
        </script>
    </head>
    <body>
        <div id="div1">
            <ul>
                <li>菜单一</li>
                <li>菜单一</li>
                <li>菜单一</li>
                <li>菜单一</li>
            </ul>
        </div>
    </body>
</html>

return false，阻止了浏览器默认事件，所以当右击鼠标右键时，不会弹出默认菜单，而是弹出了我自定义的菜单，一个ul列表。

兼容：IE8+，chrome、FF

二、阻止事件冒泡cancelBubble=true

1、举个例子说明什么是事件冒泡

<div id='div' onclick='alert("div");'>
<ul onclick='alert("ul");'>
<li onclick='alert("li");'>test</li>
</ul>
</div>

当我点击test的时候，先会弹出 li ->ul ->div。从下往上冒泡。就比如小鱼儿在海底冒泡，小泡泡从海底往海面冒泡，越来越大。html文档中最后的一个泡是document。

2、下面有个demo，我们经常用到的一个效果，显示/隐藏。当我一点击，div显示，在页面其他位置点击，div消失。以后是代码：

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>仿select-事件冒泡</title>
    <style>
    #div1
    {
        width:200px;
        height:200px;
        background:#CCC;
        display:none;
    }

    </style>
    <script>
    window.onload = function()
    {
        var oBtn = document.getElementById('btn1');
        var oDiv = document.getElementById('div1');
        
        /*当点击按钮，div显示，，点击其他地方div隐藏*/
        oBtn.onclick = function(evt)
        {
            var oEvent = evt || event;                            //evt 兼容FF/chrome浏览器
            div1.style.display = 'block';
            
         oEvent.cancelBubble = true;           //取消事件冒泡（否则点击按钮后，会冒泡到最后一层上即document） 
        }
        document.onclick = function()
        {
            div1.style.display = 'none';
            
            alert('document被点击'); 
        }
        
    }
    </script>
    </head>
<body>
<input type="button" value="点击我" id="btn1">
<div id="div1"></div>
</body>
</html>

在需要取消冒泡的地方：加一句oEvent.cancelBubble = true

兼容：IE6，FF，chrome等

三、学习js不仅要知道怎么样，还有要处理浏览器兼容，我晕了，第一个例子没能兼容IE6，再搜搜。学习果然是一场修行