stopPropagation მეთოდი

როდესაც ჯავასკრიპტის DOM-თან გვიწევს მუშაობა, აუცილებელია ვიცოდეთ თუ როგორ ხდება მოვლენები (events) ელემენტებზე.

დღევანდელ გაკვეთილში განვიხილავთ stopPropagation მეთოდს.

როდესაც დოკუმენტში რაიმე ელემენტზე გამოვიყენებთ click event-ს ეს არ ნიშნავს, რომ მხოლოდ ამ ელემენტზე არსებული eventListener შესრულდება, არამედ დოკუმენტის ხეში ყველა მშობელ ელემენტზე მიბმული click event-იც შესრულდება.

მეტი თვალსაჩინოებისთვის მოვიყვანოთ შემდეგი მაგალითი:

მაგალითი: HTML

<div id="outer">
  გარე დივი
  <div id="inner">
    შიდა დივი
  </div>
</div>

თუ ზემოთ მოყვანილ მაგალითში ორივე ელემენტზე outer და inner-ზე მივაბავთ eventListener-ს click event-ით და დავკლიკავთ inner div-ზე, outer div-ის click event-იც შესრულდება.

მაგალითი: JS

document.getElementById("outer").addEventListener("click", () => {
  console.log("Outer click");
});

document.getElementById("inner").addEventListener("click", () => {
  console.log("Inner click");
});

დაიბეჭდება:

Inner click
Outer click

იმისთვის, რომ შევაჩეროთ მსგავსი ქცევა, აუცილებელია გამოვიყენოთ stopPropagation მეთოდი, ამისთვის საჭიროა addEventListener მეთოდის მეორე პარამეტრად შემოვიტანოთ მაგალითად event სახელი, რომელშიც ხელმისაწვდომი გვექნება event-ის მეთოდები, მათ შორის stopPropagation მეთოდიც.

მაგალითი:

document.getElementById("outer").addEventListener("click", () => {
  console.log("Outer click");
});

document.getElementById("inner").addEventListener("click", (event) => {
  console.log("Inner click");
  event.stopPropagation();
});

დაიბეჭდება:

Inner click

როგორც მაგალითიდან ჩანს stopPropagation მეთოდმა შეაჩერა click event-ის მშობელ ელემენტებზე შესრულება