原生冒泡机制

来源：互联网发布：本地连接阿里云数据库编辑：程序博客网时间：2024/06/05 17:20

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8" />    <title>Document</title>    <style type="text/css">        *{            margin: 0;            padding: 0;        }        img{            border:0;        }        ol, ul ,li{list-style: none;}        div{            width:100%;            height: 100%;            background-color: #333;            position: fixed;        }        p{            width: 20px;            height: 20px;            background-color: yellow;            position:absolute;            top:50%;            left:50%;            margin-left:-10px;            margin-top:-10px;            cursor: pointer;        }    </style></head><body>    <div>        <p></p>    </div>    <script type="text/javascript">var div = document.getElementsByTagName('div')[0];var p = div.children[0];p.onclick = function(event) {alert(1); //点击p弹出 同时弹出div的alert//  谁点了冒泡  就加这段代码var event = event || window.event;if(event && event.stopPropagation) {event.stopPropagation(); //  w3c 标准} else {event.cancelBubble = true; // ie 678  ie浏览器}}div.onclick = function() {alert(2);}</script></body></html>

直接拖进编辑器运行

阅读全文

1 0