<body>
<div id="red" style="border: 1px solid #000; 400px; height: 400px;">
<div id="blue" style="border: 1px solid #000; 300px; height: 300px;">
<div
id="pink"
style="border: 1px solid #000; 200px; height: 200px;"
></div>
</div>
</div>
</body>
<script type="text/javascript">
var red = document.getElementById("red");
var blue = document.getElementById("blue");
var pink = document.getElementById("pink");
red.onclick = function (event) {
red.style.backgroundColor =
red.style.backgroundColor === "red" ? "" : "red";
event.stopPropagation();
// stop(event);
};
blue.onclick = function (event) {
blue.style.backgroundColor = "blue";
event.stopPropagation();
// stop(event);
};
pink.onclick = function (event) {
event.stopPropagation();
pink.style.backgroundColor =
pink.style.backgroundColor === "pink" ? "" : "pink";
// stop(event);
};
function stop(event) {
//阻止冒泡
var evt = event || window.event;
console.log("???", evt);
if (evt.cancelBubble) {
evt.cancelBubble = true;
} else {
evt.stopPropagation();
}
}
</script>