HTML CSS JavaScript交互实验-优快云博客

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>MyHtml.html</title> <style type="text/css"> #inner{height: 100px;background: #cfc;} #middler{background: #ccf;} #outer{background: #fcc;} div{border: 1px solid blue;padding: 20px;width: 200px;} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("*").click(function (event) { alert($(this).attr("id")); //这样在点击inner的时候会从里到外依次响应其点击事件，依此弹出inner,middler,outer //return false;//这样则会阻止其默认行为，阻止事件不再冒泡，这样就只会弹出inner event.stopPropagation(); //阻止事件冒泡 }); $("div").click(function () { alert($(this).html); }); }); </script> </head> <body> <div id="outer"> 最外层 <div id="middler"> 中间层 <div id="inner">最里层</div> </div> </div> </body> </html>

阻止冒泡的另一个思路——判断激发事件的是自己，而不是别的元素，这样就可以了。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <style type="text/css"> #inner{height: 100px;background: #cfc;} #middler{background: #ccf;} #outer{background: #fcc;} div{border: 1px solid blue;padding: 20px;width: 200px;} </style> </head> <body> <h1>点击空白处, 关闭/打开 "最里层" . 点击其它元素无效.</h1> <div id="outer"> 最外层 <div id="middler"> 中间层 <div id="inner">最里层</div> </div> </div> </body> </html> <script type="text/javascript"> var bodyObj = document.body ? document.body : document.documentElement; bodyObj.onclick = function (e) { var event = e ? e : window.event; var target = event.target ? event.target : event.srcElement; if(target===bodyObj) document.getElementById("inner").style.display = "none"; } </script>

jquery 阻止冒泡