JavaScript, propagacja i wyzwolenie rodzica

0

Koledzy, sprawa wydaje się banalna, ale w istocie wcale trywialna nie jest.
Pomyślcie sobie, że macie 3 divy:

  1. GrandParent, a w nim
  2. Parent, a w nim
  3. Child
    W "dziecku" na clicku jest stopPropagation. I jak teraz wyzwolić event na Parencie?
    Nie mamy dostępu do kodu Childa.
    Na stackoverflow itd. kazdy podaje prosty przyklad z event.target itd. nadajac przy tym cwanie paddingi itd. czyli miejsce, gdzie mozecie swobodnie sobie kliknac na Parencie omijajac Childa. A co zrobic, jak te divy, ze wzgledu na framework, sa opakowane jeden na drugim?
    Bindowanie itd. nie dziala, triggerow nie wolno uzywac. Czyste jquery:
$(document).on('click', '.parent', function(event) {
console.log('halo');
})
```;
0

Co konkretnie chcesz osiągnąć i dlaczego?
Być może w ogóle źle podchodzisz do tematu (tzw. xy problem).

0

Chodzi o to, że jest sobie biblioteka budująca selecta: bootstrap-select
Ten plugin tak tworzy całą strukturę, że otacza wszystko divem z klasą "bootstrap-select", a dodatkowo w JS przechwytuje clicka i nie możemy nic z tym zrobić.
Otoczyliśmy to wszystko divem z klasą np. "abc", ale click na nim nie działa, bo w kodzie BootstrapSelecta jest "na dole" stopPropagation.

0

A nie możesz po prostu dodać kolejnego listenera do childa i wywołać ręcznie eventu na parencie?

<div id="parent">
  <button id="child">Click me!</button>
</div>
const parent = document.getElementById('parent')
const child = document.getElementById('child')

// existing code:
child
  .addEventListener('click', (event) => {
    console.log('child clicked!')
    event.stopPropagation()
  })

// your code:
child
  .addEventListener('click', () => parent.click())

parent
  .addEventListener('click', () => {
    console.log('parent clicked!')
  })

Demo: https://codepen.io/caderek/pen/RVMbdW?editors=1011

0

Nie wystarczy Ci wykorzystać któreś ze zdarzeń udostępnianych przez tę wtyczkę?
https://silviomoreto.github.io/bootstrap-select/options/

0

Nie możemy zapiąć się na eventy BS, bo tak się składa, że w naszej sytuacji jest on wyłączony (disabled) i dlatego chcemy wywować coś na rodzicu.
A po drugie, dodanie drugiego eventu nie działa:


    $(document).on('click','.bootstrap-select', function (event) {
        console.log(event);
}

Tak jak mówiłem, pobieżnie czytając wydaje się to proste, ale takie oczywiste w praktyce nie jest.

0

I jeszcze jedno. Jak z konsoli podepniemy event, to dziala, ale z kodu w js juz nie.

1

Jak podpięcie z konsoli działa, to może gdy próbujesz go podpiąć w JS'ie to jeszcze ten element nie jest dostępny dlatego event się nie podpina. Musiałbyś podpinać eventy np. po evencie DOMContentLoaded.

1 użytkowników online, w tym zalogowanych: 0, gości: 1