代碼
提交代碼
<style>
.box {
display: flex;
align-items: center;
justify-content: center;
}
.size-100 {
width: 100px;
height: 100px;
background: #4caf50;
}
.size-200 {
width: 200px;
height: 200px;
background: chocolate;
}
.size-300 {
width: 300px;
height: 300px;
background: wheat;
}
</style>
<div class="box size-300">
<div class="box size-200">
<div class="box size-100">
</div>
</div>
</div>
<div class="result"></div>
<script>
var boxes = document.querySelectorAll('.box');
var result = document.querySelector('.result');
boxes.forEach(function(box) {
box.addEventListener('click', function() {
var el = document.createElement('p');
el.innerText = '現在觸發點擊事件的是' + this.className;
result.appendChild(el);
});
});
</script>
運行結果