onClick시 겹친 이벤트 막기

onClick시 겹친 이벤트 막기

오늘 수정작업을 하다가 만난 이슈와 핸들링 과정을 기록해 보고자 한다.

아래 예시 코드를 작성하고 내가 만난 상황을 설명해 보겠다.

const App = () => {
  const clickParentDiv = () => {
    console.log('youClickedParentDiv');
  }

  const clickChildDiv = () => {
    console.log('youClickedChildDiv');
  }

  return (
  <ParentDiv onClick={clickParentDiv}>
    <ChildDiv onClick={clickChildDiv}></ChildDiv>
  </ParentDiv>
)};

render(<App />, document.getElementById('root'));

그림판으로 그린 예시 사진

처음에는 ParentDiv만 존재하였는데, 추가적으로 기능을 만들면서 ChildDiv를 추가하게 되었다.
ChildDiv를 클릭하면 clickChildDiv 함수만 실행하고 싶었는데, ParentDiv가 겹쳐져 있어서 무조건 clickParentDiv 함수도 같이 실행되었다.
(콘솔 창을 확인하면 youClickedParentDiv 와 youClickedChildDiv 둘 다 찍혀있다.)

처음에 생각해낸 방법은 두 개의 div를 분리해서 positioning을 통해 강제로 겹치게 만드는 것이었다.

하지만, 이 방법은 반응형을 구현할때 큰 문제가 되었다.
화면이 지나치게 작아지거나 ParentDiv의 위치가 밀려서 이동이 되는 상황에 남으면 덩그러니 ChildDiv가 남겨지는 현상이 나타나는 것이다.

그래서 구글에 서칭을 시작했다.

그러다가 알게된 것이 stopPropagation()이다.

이 함수는 현재 발생한 이벤트 외에 다른 이벤트의 실행을 막아준다.
즉, 이 함수를 이용해서 겹친 이벤트의 실행을 막을 수 있는 것이다.

아래는 수정 코드 이다.

const App = () => {
  const clickParentDiv = () => {
    console.log('youClickedParentDiv');
  }

  const clickChildDiv = e => {
    e.stopPropagation();
    console.log('youClickedChildDiv');
  }

  return (
  <ParentDiv onClick={clickParentDiv}>
    <ChildDiv onClick={clickChildDiv}></ChildDiv>
  </ParentDiv>
)};

render(<App />, document.getElementById('root'));

이제 코드를 확인하면 youClickedChildDiv 하나만 찍혀있다.

---

참고자료

캡틴판교 - 이벤트 버블링, 이벤트 캡처 그리고 이벤트 위임까지
뚠띠미 - onClick시 겹쳐진 밑 부분 이벤트 발생 막기 / 이벤트 버블링 막기