Home >Web Front-end >HTML Tutorial >Bubbling_html/css_WEB-ITnose
Bubbling_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:43:33912browse
Bubbling event: When a div sets a click event, this click event will be passed to its parent, and then passed on in sequence. That is to say, when a div nests a div, the two There are click events on each div. When the click event of the div inside is triggered, both click events will be triggered. This situation will cause problems. Can be solved with 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>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：css3 @font-face_html/css_WEB-ITnoseNext article：css3 @font-face_html/css_WEB-ITnose