JS中的冒泡事件

  用个简单的demo来做示例
  

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <h1 id=‘header‘>2333</h1> <ul class="listbox"> <li>1</li> <li>2</li> <li>3</li> </ul></body></html>

首先 给li添加一个点击事件

 <script> window.onload=function(){ var li=document.getElementsByTagName(li); for(i=0;i<li.length;i++){ li[i].onclick=function(){ alert(我是 li) } } } </script>

点击li会弹出提示框

  但是这种点击事件会继承到li元素的祖先级

<script> window.onload=function(){ var li=document.getElementsByTagName(li); var ul=document.getElementsByTagName(ul)[0]; ul.onclick=function(){ alert(ul继承到了) } document.body.onclick=function(){ alert(这是body) } for(i=0;i<li.length;i++){ li[i].onclick=function(){ alert(我是 li) } } } </script>

 

 

当我们给ul和body添加点击事件,在点击li区域,弹出提示框之后,点击提示框上的确定,会继续执行ul的点击事件,再执行body的点击事件

关闭这种冒泡事件,在li的点击事件里加上关闭冒泡的命令

for(i=0;i<li.length;i++){ li[i].onclick=function(){ alert(‘我是 li‘); event.cancelBubble=true; } }

或者

for(i=0;i<li.length;i++){ li[i].onclick=function(){ alert(‘我是 li‘); // event.cancelBubble=true; event.stopPropagation(); } }

这样,再次点击li,弹出‘我是 li’之后,点击弹窗的确定,就不会再弹出其他的提示框了

注意:event.cancelBubble的值是默认等于false

 

相关文章