JavaScript හි සිදුවීම් ගැලීම නැවැත්වීම යෙදීම

එක් මාපියෙකු තුළ අප සතුව බොත්තමක් සහ යම් අවහිරතාවයක් ඇතැයි සිතමු:

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

අපගේ මූලද්‍රව්‍යවලට විචල්‍යවල සබැඳි ලබා ගනිමු:

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

අපගේ අවහිරතාවය ආරම්භයේදී සැඟවී ඇතැයි සිතමු:

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

බොත්තම ක්ලික් කිරීමෙන් අපගේ අවහිරතාවය දිස්වන පරිදි කරමු:

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

දැන් කරමු, ඕනෑම මාපිතාගේ ස්ථානයක ක්ලික් කිරීමෙන් අපගේ අවහිරතාවය සැඟවෙන පරිදි:

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

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

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