原生冒泡机制

最新推荐文章于 2022-10-25 09:56:13 发布

一个造轮者

最新推荐文章于 2022-10-25 09:56:13 发布

阅读量237

点赞数 1

本文链接：https://blog.csdn.net/qq_35254907/article/details/77870533

版权

vue 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

html

6 篇文章 0 订阅

订阅专栏

<!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>

直接拖进编辑器运行