[JavaScript, react] onClick 시 겹쳐진 밑 부분 이벤트 발생 막기 / 이벤트 버블링 막기

참고: https://webisfree.com/2016-06-15/[자바스크립트]-이벤트-버블링-제거방법-stoppropagation() 

      <h2>이벤트 버블링 막기</h2>
      
      <div
        style={{
          width: "80%",
          height: "100px",
          backgroundColor: "salmon",
          margin: "10px auto",
        }}
        onClick={() => {
          alert("전체 영역 클릭");
        }}
      >
        전체 영역
        <div
          style={{
            width: "80%",
            height: "50px",
            backgroundColor: "greenyellow",
            margin: "10px auto",
          }}
          onClick={() => {
            alert("겹쳐진 영역 클릭");
          }}
        >
          겹쳐진 영역
        </div>
      </div>

이렇게 div나 다른 html 태그들이 겹쳐져 있을 때 겹쳐진 영역에서 클릭을 했을 때 클릭한 영역의 이벤트 1개만 일어나야 할 때가 많다.

 

겹쳐진 영역을 클릭 시 처음에는 겹쳐진 영역의 onClick 이벤트가 발생한다.

하지만 그 이벤트 이후..!!

이렇게 뒤에 있는 영역의 onClick 이벤트까지 겹쳐져서 발생하게된다.

이런 것을 이벤트 버블링이라고 하는데, 어떻게 해결해야될지 막막하다.

 

하지만 한 줄만 추가해주면 끝이다!!!

 <h2>이벤트 버블링 막기</h2>

      <div
        style={{
          width: "80%",
          height: "100px",
          backgroundColor: "salmon",
          margin: "10px auto",
        }}
        onClick={() => {
          alert("전체 영역 클릭");
        }}
      >
        전체 영역
        <div
          style={{
            width: "80%",
            height: "50px",
            backgroundColor: "greenyellow",
            margin: "10px auto",
          }}
          onClick={(event) => {
            event.stopPropagation();
            alert("겹쳐진 영역 클릭");
          }}
        >
          겹쳐진 영역
        </div>
      </div>

여기 빨간 박스부분의 내용만 추가해줬음

event의 stopPropagation() 함수를 이용하면 간단하게 해결된다.

 

해당 함수는 현재 발생한 이벤트 이후의 이벤트들을 막아주는 함수이다~

이제 얘를 넣어주면 겹쳐진 영역을 클릭해도 자기가 가지고 있는 이벤트만 실행되고 끝이난다.

 

https://developer.mozilla.org/ko/docs/Web/API/Event/stopPropagation

Event.stopPropagation() - Web API | MDN