Ứng Dụng Việc Ngăn Chặn Sự Nổi Bọt Sự Kiện trong JavaScript

Giả sử bên trong một phần tử cha, chúng ta có một nút bấm và một khối nào đó:

<div id="parent">
	<button>click me</button>
	<div id="block">
		text
	</div>
</div>

Lấy tham chiếu đến các phần tử của chúng ta vào các biến:

let parent = document.querySelector('#parent');
let button = document.querySelector('button');
let block  = document.querySelector('#block');

Giả sử khối của chúng ta ban đầu bị ẩn:

#block:not(.active) {
	display: none;
}

Hãy làm sao cho khi nhấp vào nút, khối của chúng ta sẽ hiển thị:

button.addEventListener('click', function() {
	block.classList.add('active');
});

Và bây giờ hãy làm sao cho khi nhấp vào bất kỳ vị trí nào của phần tử cha, khối của chúng ta sẽ ẩn đi:

parent.addEventListener('click', function() {
	block.classList.remove('active');
});

Tuy nhiên, chúng ta đang chờ đợi một bất ngờ: vì nút bấm nằm bên trong phần tử cha, nên nhấp vào nút đồng thời cũng có nghĩa là nhấp vào phần tử cha. Điều này có nghĩa là đầu tiên khối của chúng ta sẽ hiển thị, sau đó do sự nổi bọt của sự kiện, trình xử lý ở phần tử cha sẽ kích hoạt và khối của chúng ta sẽ bị ẩn.

Chính lúc này khả năng hủy bỏ sự nổi bọt sẽ có ích cho chúng ta: chúng ta có thể làm sao cho khi nhấp vào nút để hủy sự nổi bọt, phần tử cha sẽ không phản ứng với cú nhấp chuột này.

Tự mình triển khai hoạt động chính xác của nhiệm vụ đã được mô tả.