[부모태그로의 이벤트 전파 중지] event.stopPropagation()

---

https://www.w3schools.com/jquery/event_stoppropagation.asp에서

[정의와 사용법]에는

event.stopPropagation () 메서드는 부모 요소에 이벤트 버블링을 중지하여 

부모 이벤트 핸들러가 실행되지 않도록합니다.

라고 나와있다

** 버블링 : 자식 요소로부터 부모 요소로 올라오며 실행되는 것을 이벤트 버블링(Event Bubbling)이라고 한다.

---

바로 아래를 따라해보면서

어떤건지 간단하게 느껴보자면

 

div 태그 클릭

p태그 클릭

span태그 클릭

이렇게 html를 구성한 후에

클릭한 영역의 텍스트가 나오도록 할 것이다 

(기본적인 마크업? 이지 않을까, 부모요소 안에 자식요소들이 생기는 것)

여기서 미리 생각해 볼 수 있는 것은

div를 클릭하면 "div태그 클릭" 이란 알럿창이 뜰 것이고 (팝업 1개만)

<p></p>와 <span></span>태그를 클릭하면 당연히

<div></div> 안에 감싸져 있는 요소이므로

"p태그 클릭" 혹은 "span태그 클릭" 이후에 "div태그 클릭" 이란 알럿창이 이어서 뜰 것이다. (팝업 2개가)



그런데 이때! 부모요소(<div></div>)한테까지

영향주기 싫을 때!

click이벤트가 자식에 따라 부모까지 영향을 미치지 않도록!

하려면

event.stopPropagation() 를 사용하는 것이다.

아래 codepen에서 테스트를 해보장!

아래에서는 span태그에 event.stopPropagation() 을 넣어놓았다

See the Pen EEzyBo by seobin (@lullu-lalla) on CodePen.