[JavaScript] 이벤트가 겹치는 문제, stopPropagation로 해결하기

Code Flow

1. p 태그를 클릭하면 p 태그의 콘텐츠를 출력하는 alert 창을 띄워주고
2. 삭제 버튼을 클릭하면 삭제할 것인지 물어보는 confirm 창을 띄워주고
3. 확인을 누르면 p 태그를 삭제한다.

(문제점)

• confirm 창에서 확인을 누르면 alert 창이 한번 더 나오는 현상이 나타난다. confirm 이벤트가 p를 지나가면서(Bubble phase) 나타나는 현상이다. 의도하지 않은 alert 이벤트로 인해 오류가 발생할 수 있다.
  

(해결방법)

• 이벤트에 stopPropagation을 추가하여 해결 가능하다. confirm 이벤트의 버블링은 alert 이벤트 버블링을 Firing하지 않게 만든다.
• 참고로 stopPropagation은 인터넷 익스플로러 9 이상에서 호환된다.