事件冒泡 & 阻止事件冒泡

Posted 2020-09-09 Booo

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了事件冒泡 & 阻止事件冒泡相关的知识，希望对你有一定的参考价值。

事件冒泡 : 当一个元素接收到事件的时候，会把他接收到的所有传播给他的父级，一直到顶层window.事件冒泡机制

阻止冒泡 : 当前要阻止冒泡的事件函数中调用 event.cancelBubble = true;

事件函数绑定：
　　
　　//oDiv1.onclick = fn1;  给oDiv加点击事件，给事件绑定一个函数。

<script>
　　window.onload = function() {


	var oBtn = document.getElementById(‘btn‘);
	var oDiv = document.getElementById(‘div1‘);
	
	oBtn.onclick = function(ev) {
		var ev = ev || event;
		
		ev.cancelBubble = true;　　//阻止当前对象的当前事件的冒泡
		
		oDiv.style.display = ‘block‘;
	};
	
	document.onclick = function() {
		oDiv.style.display = ‘none‘;
	}
	
　　}
</script>
=====================================================================

以下是利用事件冒泡机制的例子：

<style>
　　#div1 {width: 100px; height: 200px; background: red; position: absolute; left: -100px; top: 100px;}
　　#div2 {width: 30px; height: 60px; position: absolute; right: -30px; top: 70px; background: black; color: white; text-align: center;}
</style>

<script>
　　window.onload = function() {
	
	var oDiv = document.getElementById(‘div1‘);
	
　　　　//只给父级div1添加事件函数，这样子级触发事件的时候也会执行父级的函数
	oDiv.onmouseover = function() {
		this.style.left = ‘0px‘;
	}
	
	oDiv.onmouseout = function() {
		this.style.left = ‘-100px‘;
	}
	
　　}
</script>


<body>
　　<div id="div1">
　　　　<div id="div2">分享到</div>
　　</div>
</body>

以上是关于事件冒泡 & 阻止事件冒泡的主要内容，如果未能解决你的问题，请参考以下文章