前端阻止事件冒泡和默认事件

来源：互联网发布：2016最新网络歌曲dj版编辑：程序博客网时间：2024/04/20 17:36

首先了解什么是事件冒泡什么是事件捕获

注：图片来自博客http://www.cnblogs.com/Chen-XiaoJun/p/6210987.html

实例代码如下

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>事件流</title>    <style type="text/css">        #content{width: 150px;height: 150px;background-color: red;}        #btn{width: 80px;height: 80px;background-color: green;}    </style></head><body>    <div id="content">content        <div id="btn">button</div>    </div>    <script type="text/javascript">        var content = document.getElementById("content");        var btn = document.getElementById('btn');        btn.onclick = function(e){            alert("btn");              // 阻止事件冒泡            var ev=e?e:window.event;//兼容IE写法，window.event获取IE时间源            window.event?window.event.cancelBubble=true:e.stopPropagation();        };        content.onclick = function(){            alert("content");        };                document.onclick = function(){            alert("document");        };        document.oncontextmenu = function(e){            // alert("document");         // 阻止默认事件         if(e.preventDefault){         e.preventDefault();         }else{         window.event.returnValue = false;         return false;         }        }        // 事件冒泡btn——>content——>document          </script></body></html>

阅读全文

0 0