Seharusnya cukup stopPropagation tapi kok tidak jalan. Duh!

Cerita saya mengerjakan proyek portfolio

Awalan

Sebelum baca ini harus paham event bubbling di javascript. Dan kode di bawah juga ada jQuery padahal saya gak pake jquery. Ya cuma buat jelasin aja sih.

Masalah

Lihat fitur action yang saya buat:

Tweet homepage dari https://twitter-react-by-yudi099.netlify.com

Masalah ada di sana. Setiap kali saya menekan Love misalnya. Saya malah pindah halaman ke detail tweet alih-alih jumlah love bertambah. Saya tahu kenapa begitu: saya menggunakan <Link> atau <a> tag sebagai parent element <Tweet> component. Otomatis pindah ke halaman tersebut jika saya klik di bagian mana saja pada tweet termasuk action love. Itu

Laman detail tweet

memang didesain seperti itu. Tahu lah.

Ya, saya pikir begini saja solusinya:

$("#love").click(function(e) {
    e.stopPropagation();
}

Dengan begini event bubbling berhenti di tag #love sehingga <a> tag event handler tidak akan tereksekusi dan tidak akan pindah laman.

Ternyata gak berhasil. Ya ampun kenapa.

Saya bisa saja pakai preventDefault dan berhasil. Tapi pertanyaan di kepala ini tidak terjawabkan. Kenapa stopPropagation tidak berhasil?

Jawaban

Sudah saya baca stopPropagation di MDN namun saya tetap tidak paham meski jawabannya ada disitu sebenarnya, hanya saja .

The stopPropagation() … prevents further propagation of the current event … however It does not prevent any default behaviors from occurring; for instance, clicks on links are still processed. If you want to stop those behaviors, see the preventDefault() method.

Ketidakpahaman saya dipicu oleh pemahaman bahwa semua event handler di tag <a> tidak akan tereksusi karena stopPropagation sudah menghentikan event bubbling pada element love. Dan ini salah karena ternyata tidak semua, melainkan user-created event handler saja. Sedangkan default event handler dari browser tidak. Itu jawabannya haha.

Pindah ke halaman pada tag <a>adalah event handler bawaan. Jadi tidak akan terpengaruh stopPropagation.