关于冒泡问题

最新推荐文章于 2022-05-10 01:13:38 发布

shenzhenNBA

最新推荐文章于 2022-05-10 01:13:38 发布

阅读量1.5k

点赞数

分类专栏： HTML/XML JavaScript 文章标签： fun function div html 浏览器 class

本文链接：https://blog.csdn.net/shenzhenNBA/article/details/7346196

版权

JavaScript 同时被 2 个专栏收录

60 篇文章 0 订阅

订阅专栏

HTML/XML

14 篇文章 0 订阅

订阅专栏

关于冒泡问题, 这个问题我也不知道怎么说清楚, 有时需要使用到, 就我个人简单的理解就是当父子元素出现包含关系, 子元素包含在父元素中,但在父元素之上(可理解为其 z-Index 高于父元素); 或者可以这样理解, 父子元素出现重叠, 子元素的 z-Index 大于父元素, 当用户行为(如 click事件等)作用于子元素上时, 默认情况下,该事件会同时作用到下面的父元素, 但是有时, 我们希望仅仅事件作用到子元素上, 而不希望该事件传递下方的父元素, 所以这个时候就需要利用冒泡问题处理, 阻止事件向下方传递.

浏览器默认设置是事件可以传递到下方的各个元素的, 冒泡的应用一般是阻止事件向下方的元素传递;

对于事件冒泡的设置各个浏览器不同:

事件.cancelBubble=true; // MS IE

事件.stopPropagation(); // 非 MS IE

其中事件又得因各个浏览器的不同需要做兼容处理: var e=evt || window.event; 所以一个冒泡函数大致可以这样建立:

function funName(evt){
	var e=evt || window.event;  //事件
	if(window.event){
		e.cancelBubble=true;  //for MS IE
	}else{
		e.stopPropagation();  //for Not MS IE
	}
	//...other code...
}

一个关于冒泡的完整例子:

要求: 当单击item04这行文字时没有触发下面 id=div01 的div元素设置的 fun01 函数, 而其他行的item文字则同时响应两个函数,即 li 设置的响应函数 fun02 和下面div元素设置的响应函数的 fun01 ;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>冒泡 问题</title>
</head>
<style type="text/css">
*{font-family:verdana; font-size:12px;}
div{border:1px solid red; padding:2px;}
</style>
<script type="text/javascript">
function $(id){
	return "string" == typeof(id) ? document.getElementById(id) : id ;
}

function fun01(){
	alert('This is active with DIV which under the UI LI tag, this is fun01 active.');
}

function fun02(obj,evt){
	var v=obj.innerHTML;
	alert('This tag :'+ obj.tagName +' with HTML = '+v+'\n\nattend: trigger function fun01 now');
}

function fun03(obj,evt){  //stop the Bubble here
	var v=obj.innerHTML;
	var e=evt || window.event;
	if (window.event) {//for IE
		e.cancelBubble=true;
	 }else{ //for FF
		e.stopPropagation();
	 }
	alert('This tag :'+ obj.tagName +' with HTML = '+v+'\n\nattend: Not trigger function fun01 here, stop the Bubble now!');
}
</script>
<body>
<p>
<b>关于 冒泡 问题</b>,<br>
其实就是否希望事件传递到下方的元素, 默认是传递到下方的元素,阻止下方的元素的事件触发; ID=div01的 DIV 对象包含了 li 对象，
在li上的点击事件中，除了 item04 使用fun02 函数阻止 冒泡 问题没有出发 fun01 函数外，其他的li元素点击时都触发了 fun01 事件

</p>
<div id="div01" οnclick="javascript:fun01();">
<div class="title">
<span id="current_type_name">about the Bubble question.</span>
</div>
    <ul class="class" id="menu_type_list">
        <li οnclick="fun02(this,event);">item 01</li>
        <li οnclick="fun02(this,event);"><b>item 02</b></li>
        <li οnclick="fun02(this,event);">item 03</li>
        <li οnclick="fun03(this,event);"><b>item 04 stop the Bubble here, 设置冒泡,不把事件传递到下方[id=div01]的DIV元素</b></li>
        <li οnclick="fun02(this,event);">item 05</li>
        <li οnclick="fun02(this,event);">item 06</li>
    </ul>
</div>

</body>
</html>

以上就是一个简单的冒泡问题的例子, 更多关于冒泡的问题,可以网上搜索更多的资料.