jQuery stopPropagation nie działa w divie który posiada event click

Question

Witam, mam diva który po kliknięciu wyświetla tekst, w tym divie mam też przycisk i chciałbym, żeby po kliknięciu checkboxa pojawiał się też tekst w konosli. Problem jest taki, że po kliknięciu w checkbox "odpalają" się dwa eventy kliknięcia - ten z diva oraz ten z checkboxa. Jak można naprawić ten błąd? e.stopPropagation() nie działa.
https://codepen.io/FoxCode/pen/ZdrzVV

Answer 1

Fajny edge case w sumie. stopPropagation nie działa, bo w rzeczywistości klikasz w ostylowany label. A to, zgodnie ze specyfikacją, odpala dodatkowy click dla pola formularza, a następnie kontynuuje click dla samego label:

1. Klikasz label.
2. Odpala się zdarzenie click dla label.
3. Odpala się domyślne zachowanie kliku dla label
4. click dla label leci dalej, bąbelkując do li.
5. Odpalane jest input.click();
6. click dla label leci dalej, bąbelkując do li.

Innymi słowy: musisz dodać e.stopPropagation także do label a nie tylko input.

Comments

Ok, a dlaczego nawet jak zamiast inputa dam sam label:
https://codepen.io/FoxCode/pen/ZdrzVV
 

$('label').on('click',(e)=>{e.stopPropagation()})

a problem występuje i tak, jak mogę dodać stopPropagation do label?

---

Edytowałem odpowiedź. Trzeba dodać do obydwu. Wówczas zablokowane zostanie bąbelkowanie z obydwu elementów. Sorry za wprowadzenie w błąd.

---

Ok, dzięki. Jak mogę uzystać event elementu label gdy mam onclick na inpucie? 
 

$('input').on("click", (e)=>{
  e.stopPropagation();
  $('label').event.stopPropagation(); /// ?
	console.log("You clicked button");
});

Jak powinienem dodać stopPropagation do dwóch elementów?

---

Normalnie:

$( 'input' ).on( 'click', ( e ) => {
    e.stopPropagation();
} );

$( 'label' ).on( 'click', ( e ) => {
    e.stopPropagation();
} );

Tak będzie chyba najładniej.

---

BTW jakby ktoś chciał sobie to lepiej prześledzić, przygotowałem mały playground: https://jsfiddle.net/Comandeer/s13g84va/

---

Czy nie lepiej umieścić <input> w <label> i odnieść się do <label> przez e.target.parentNode, zamiast podpinać osobny listener dla <label>?

---

@Comandeer, a propos kolejności obsługi zdarzeń - czy jesteś w stanie podać źródło, gdzie opisana jest kolejność dla przypadku z tej odpowiedzi na SO (mousedown, focus, mouseup, click -> podczas kliku na focusowalny element)? Nie udało mi się znaleźć na W3 ani MDN, ani quirksmode.

---

O ile się nie mylę, nie ma standardowej kolejności zdarzeń dla różnych typów zdarzeń. Wiadomo, jak to działa dla samego focusu, dla samej myszki, ale nie spotkałem się dotąd ze standardem definiującym, jak mają się mieszać te zdarzenia. Niemniej kolejność w SO jest najbardziej logiczna. mousedown przenosi focus na dany element, więc pomiędzy mousedown a mouseup powinien zajść cały cykl focusowania (blur poprzedniego elementu i focus nowego).

Answer 2

po kliknięciu w checkbox "odpalają" się dwa eventy kliknięcia

To nie dwa eventy kliknięcia - sam napisałeś w obsłudze drugiego eventu, że łapiesz "change", nie "click".

Dlatego też stopPropagation() "nie działa" - bo to nie jest jeden event propagujący się, tylko dwa różne eventy.

Comments

A co zrobić w takiej sytuacji?
https://codepen.io/FoxCode/pen/ZdrzVV?

---

A co zrobić w takiej sytuacji? 

Nie rozumiem pytania... a co chcesz zrobić?

---

Zmieniłem "change" na "click", wszystko działało, ale po dodaniu CSSa gdzie ten checkbox jest zmieniany przy pomocy "label" problem "dwóch kliknięć" nadal występuje

---

Hmm... to tutaj już za bardzo nie wiem niestety, przepraszam. Może ktoś inny będzie wiedział.