理解阻止浏览器默认事件和事件冒泡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,再搜搜。学习果然是一场修行

 

你可能感兴趣的:(cancel)