SOURCE

const domBox = document.querySelector('.box');
const domList = document.querySelector('.list');
const domItem = document.querySelectorAll('.item');

domBox.addEventListener('click', toggleList);
function toggleList() {
    console.log(domList.style.display);
    domList.style.display = domList.style.display === 'none' ? 'block' : 'none';
}

for(let i =0; i < domItem.length; i++) {
    domItem[i].addEventListener('click', toggleColor);
}
function toggleColor(e) {
    const color = `rgb(${random(255)},${random(255)},${random(255)})`;
    e.target.style.backgroundColor = color;
    console.log(e.target);
    e.stopPropagation()
}
function random(num) {
    return Math.floor(Math.random() * num);
}

<div class="box">
    <div class="title">title-未阻止事件冒泡</div>
    <div class="list">
        <div class="item">item-已阻止事件冒泡</div>
        <div class="item">item-已阻止事件冒泡</div>
    </div>
</div>

.box {
    padding: 20px;
    background-color: red;
}
.title {
    margin: 40px 20px;
    line-height: 50px;
    text-align: center;
    background-color: green;
}

.item {
    margin: 40px 20px;
    line-height: 50px;
    text-align: center;
    background-color: blue;
}