直接上代码,复制黏贴到你的html页面 点击下看看 立刻明白,根本不用一堆话语来解释
<!DOCTYPE html> <html> <head> <title>Bootstrap test</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--<link href="css/bootstrap.min.css" rel="stylesheet">--> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <script src="js/respond.min.js"></script> <![endif]--> <!--<script src="js/jquery-1.12.4.min.js"></script>--> <!--<script src="js/bootstrap.min.js"></script>--> <style type="text/css"> /*a { background: #cccccc; color: white; @link-color } */ .box { width: 300px; height: 200px; border: 1px solid red; } .content { width: 200px; height: 180px; border: 1px yellowgreen solid; } .h11 { width: 150px; border: 1px blue solid; } /*@media screen and (max-width:960px) { body { background: black } }*/ </style> </head> <body> <h1>Hello, world!</h1> <div class="container">test</div> <div class="box"> <div class="content"> <h1 class="h11">woshiH1</h1> </div> </div> </body> <script> // window.onresize = function() { // console.log(document.body.clientWidth); // } function returnTar() { var e = e || window.event; var target = e.target || e.srcElement; return target.className.toLowerCase(); } var hh = document.getElementsByClassName('h11')[0]; var box = document.getElementsByClassName('box')[0]; var content = document.getElementsByClassName('content')[0]; hh.addEventListener('click', function() { console.log("小 冒泡 target: " + returnTar()); }, false); hh.addEventListener('click', function() { console.log("小 捕获 target: " + returnTar()); }, true); content.addEventListener('click', function() { console.log("中 冒泡 target: " + returnTar()); }, false); content.addEventListener('click', function() { console.log("中 捕获 target: " + returnTar()); }, true); box.addEventListener('click', function() { console.log("大 冒泡 target: " + returnTar()); }, false); box.addEventListener('click', function() { console.log("大 捕获 target: " + returnTar()); }, true); </script> </html>