javascript中级--事件冒泡即取消冒泡

最新推荐文章于 2019-02-25 12:30:00 发布

Z19871124123456

最新推荐文章于 2019-02-25 12:30:00 发布

阅读量87

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Mr-W/p/6497798.html

版权

一、事件冒泡

<!DOCTYPE html>
<html lang="en" οnclick="alert( 'html')">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件冒泡</title>
</head>

<body οnclick="alert('body')">
    <div style="width:400px;height:400px;background:red" οnclick="alert('red')">
        <div style="width:200px;height:200px;background:blue" οnclick="alert('blue')">
            <div style="width:100px;height:100px;background:#ccc;" οnclick="alert('gray')"></div>
        </div>
    </div>
</body>

</html>

二、取消冒泡

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #menu {
            width: 100px;
            height: 300px;
            background: #ccc;
            margin-top: 10px;
            display: none;
        }
    </style>
    <script>
        window.onload = function() {
            var oBtn = document.getElementById('btn1');
            var oMenu = document.getElementById('menu');
            oBtn.onclick = function(ev) {
                var oEvent = ev || event;
                oMenu.style.display = "block";
                // alert('a');
                oEvent.cancelBubble = "true"; //阻止冒泡
            }
            document.onclick = function() {
                oMenu.style.display = "none";
            }
        }
    </script>
</head>

<body>
    <input id="btn1" type="button" name="" value="弹出">
    <div id="menu"></div>
</body>

</html>

转载于:https://www.cnblogs.com/Mr-W/p/6497798.html