冒泡情况_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:43:33
Original
893 Leute haben es durchsucht

冒泡事件:是当一个div设置一个点击事件,这个点击事件会传递给它的父级,然后依次传递下去,也就是说,当div嵌套一个div,两个div上都有点击事件,当里边的div点击事件触发,两个点击事件都会触发,这种情况会带来问题。可以用cancelBubble=true;解决

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>冒泡</title><style>#div1{width:300px; height:300px; background:#999; display:none;}</style><script>window.onload=function(){	var oBtn=document.getElementById('btn1');	var oDiv=document.getElementById('div1');		oBtn.onclick=function(ev)	{		var oEvent=ev||event;//解决兼容问题		oDiv.style.display='block';//当点击按钮是oDiv显示		oDiv.onclick=function(ev)		{			oEvent=ev||event;			oEvent.cancelBubble=true;//当oDiv显示后,关闭oDiv的冒泡,点击oDiv,不会隐藏		}		oEvent.cancelBubble=true;//关闭按钮中的冒泡	}	document.onclick=function()//当按其他空白区域,oDiv消失	{		oDiv.style.display='none';	}}</script></head><body><input id="btn1" type="button"  value="显示"/><div id="div1"></div></body></html>
Nach dem Login kopieren

 

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage