用个简单的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