Εφαρμογή της Διακοπής της Ανάδοσης Γεγονότων στο JavaScript

Ας υποθέσουμε ότι μέσα σε ένα γονέα έχουμε ένα κουμπί και ένα συγκεκριμένο μπλοκ:

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

Ας πάρουμε αναφορές στα στοιχεία μας σε μεταβλητές:

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

Ας υποθέσουμε ότι το μπλοκ μας είναι αρχικά κρυμμένο:

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

Ας κάνουμε έτσι ώστε με κλικ στο κουμπί το μπλοκ μας να εμφανιστεί:

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

Και τώρα ας κάνουμε έτσι ώστε με κλικ σε οποιοδήποτε σημείο του γονέα το μπλοκ μας να κρύβεται:

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

Ωστόσο, μας περιμένει μια απροσδόκητη έκπληξη: εφόσον το κουμπί βρίσκεται μέσα στον γονέα, τότε το κλικ στο κουμπί ταυτόχρονα σημαίνει και κλικ στον γονέα. Αυτό σημαίνει ότι πρώτα το μπλοκ μας θα εμφανιστεί, και στη συνέχεια, λόγω της ανάδοσης του γεγονότος, θα ενεργοποιηθεί ο χειριστής στον γονέα και το μπλοκ μας θα κρυφτεί.

Εδώ ακριβώς μας φανεί χρήσιμη η δυνατότητα ακύρωσης της ανάδοσης: μπορούμε να κάνουμε έτσι ώστε κατά το κλικ στο κουμπί να ακυρώνεται η ανάδοση, ο γονέας να μην αντιδρά σε αυτό το κλικ.

Αυτόνομα υλοποιήστε τη σωστή λειτουργία της περιγραφείσας εργασίας.