直接上代码，复制黏贴到你的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>
时间： 2024-11-07 21:13:26