关于冒泡的总结

最新推荐文章于 2022-02-09 16:38:22 发布

lixin327

最新推荐文章于 2022-02-09 16:38:22 发布

阅读量612

点赞数

文章标签：冒泡 js 取消冒泡

本文链接：https://blog.csdn.net/lixin3273110c/article/details/12068067

版权

看了网上的资料，终于能理解冒泡机制，现在写下自己的一点心得，这里边也有从网上找的。

由于HTML中的对象都是层次结构，比如一个Table包含了多个TR，一个TR包含了多个TD,Bubble就是一个事件可以从子节点向所有父节点传递，比如鼠标点击了一个TD，当前的event.srcElement就是这个TD，但是这种冒泡机制使你可以从TR或者Table处截获这个点击事件，但是如果你event.cancelBubble，则就不能上传事件。

冒泡的顺序是由里向外（div-->body-->html-->document-->window）,不过一般把document当做根节点。阻止冒泡的函数可以这么写

function stopFunc(event){
	var evt = window.event||event;
	if(evt.stopPropagation){
		evt.stopPropagation();//火狐
	}else{
		evt.cancleBuble = true();//ie
	}
}

举一个例子，如一个html结构如下：

<body>
   	<form action="test" name="searchFrm">
   		<input type="text" id="keyid" name="keyword" >
   		<input type="submit" value="搜索">
   		<div id="container"  οnmοusedοwn="stopFunc(event)" ></div>
   	
   	</form>
</body>

当想点击<div>层以外的地方来隐藏这个<div>,那么可以给根节点document绑定一个click事件，一点击html就隐藏<div>。

document.documentElement.onclick = function() {
    
	document.getElementById('need_hide').style.display = 'none';

}

或者这样写也行

document.onclick = function(){ 
	document.getElementById("container").style.display = "none";
}

但是问题来了，现在就算点击这个<div>也使其隐藏了，原因就在于<div>是document的子节点，当给根节点document添加onclick事件后，所有的子元素(div,body,html)都会添加这个事件，所以为了避免这种结果，就需要在该元素被click时取消冒泡，添加stopFunc()方法。
若不取消冒泡，那么在对<div>进行click时，就会进行冒泡传递，被document这个根节点接收click事件，根节点发生的情况就是只要点击根节点，包括它的子元素，这个<div>都会被隐藏。而这个<div>又属于document，所以在点击<div>本身时也会隐藏。
相当于一个循环，根节点自动给它的子元素添加相同的事件，而子元素反过来又会发生冒泡来影响根节点，根节点又会对子元素本身产生影响，相互影响。

如果还想增加一个链接：<a href="#" id="btn_show">显示层</a>，用它来控制该层显示出来，那么仍然需要在该链接被点击时阻止冒泡事件的发生，加上以下代码：

document.getElementById('btn_show').onclick = function(e) {
    
	document.getElementById('need_hide').style.display = 'block';

	stopPropagation(e);

}

lixin327

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于冒泡的总结

看了网上的资料，终于能理解冒泡机制，现在写下自己的一点心得，这里边也有从网上找的。由于HTML中的对象都是层次结构，比如一个Table包含了多个TR，一个TR包含了多个TD,Bubble就是一个事件可以从子节点向所有父节点传递，比如鼠标点击了一个TD，当前的event.srcElement就是这个TD，但是这种冒泡机制使你可以从TR或者Table处截获这个点击事件，但是如果你event.
复制链接

扫一扫