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');
});

කෙසේ වෙතත්, අපව අනපේක්ෂිත පුදුමයක් බලා සිටිනු ඇත: බොත්තම මාපියා තුළ පිහිටා ඇති බැවින්, බොත්තම මත ක්ලික් කිරීම එකවර මාපියා මත ක්ලික් කිරීමක් ද වේ. මෙයින් අදහස් කරන්නේ පළමුව අපගේ අවහිරතාවය දිස්වන අතර, පසුව සිදුවීම ගැලීම හේතුවෙන් මාපියාගේ හසුරුවන්නා ක්‍රියාත්මක වී අපගේ අවහිරතාවය සැඟවී යන බවයි.

මෙහිදී ගැලීම අවලංගු කිරීමේ හැකියාව අපට ප්‍රයෝජනවත් වනු ඇත: බොත්තම මත ක්ලික් කිරීමේදී ගැලීම අවලංගු කිරීම, මාපියාට මෙම ක්ලික් එකට ප්‍රතික්‍රියා නොකිරීම අපට කළ හැකිය.

විස්තර කරන ලද කාර්යයේ නිවැරදි ක්‍රියාකාරිත්වය ඔබ විසින්ම ක්‍රියාත්මක කරන්න.