🙌 클릭 이벤트 영향을 피하는 법 e.stopPropagation() 🙌

라쿤팀 QA를 진행하면서 알게된 e.stopPropagation() 에 대해서 정리하고자 한다.

문제상황은 검색창을 모달로 구현시 백그라운드와 검색창이 존재하는데
백그라운드에 모달 닫는 이벤트를 넣으면 입력창을 누를때도 모달이 닫힌다

<back>
	<search>
    </search>
</back>

이런 구조로 이루어져있어서 search가 영향을 받는것이다.
여기서

e.stopPropagation()

을 사용하면 클릭시에도 영향을 받지 않는다!!

Event 인터페이스의 stopPropagation() 메서드는 현재 이벤트가 캡처링/버블링 단계에서 더 이상 전파되지 않도록 방지합니다. 전파를 방지해도 이벤트의 기본 동작은 실행되므로, stopPropagation()이 링크나 버튼의 클릭을 막는 것은 아닙니다. 이런 기본 동작을 방지하려면 preventDefault() 메서드를 사용하세요. 또한, stopPropagation()은 같은 이벤트 대상에 부착한 다른 수신기까지 막지는 않습니다. 이것까지 막으려면 stopImmediatePropagation()를 사용하세요.

mdn에는 이런식으로 나와있다.

적용

나는 이런식으로 적용하였는데
searchModalInput에는 모달이 닫히는 영향을 받지 않게 하였고
searchModalBgBox는 검색창 밖의 어두운 백그라운드여서 클릭하면 모달이 닫히게 구현하였다

해결 !! 🙌