Heim >Web-Frontend >HTML-Tutorial >冒泡情况_html/css_WEB-ITnose
冒泡情况_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:43:33919Durchsuche
冒泡事件：是当一个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>
Stellungnahme：
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
Vorheriger Artikel：css3 @font-face_html/css_WEB-ITnoseNächster Artikel：在没有服务器的网页之间如何实现数据的共享_html/css_WEB-ITnose