버튼 클릭 이벤트 막기
-
[Next.js 14] 버튼 동시에 눌리는 현상 막기 [stopPropagation][Typescript]웹 개발/소소한 팁, 버그 해결 2024. 3. 20. 01:20
웹을 디자인하다 보면 어떤 정보를 담고 있는 버튼 안에 삭제 버튼이 있는 것처럼 버튼과 버튼이 겹치는 것이 불가피할 때가 있다. 이때 눌러보면 두 버튼이 모두 작동하는데, 버튼을 눌렀을 때 하나만 동작하는 것이 일반적이니 이를 어떻게 할 수 있을지 알아보자. 핵심은 event의 stopPropagation()이다. 안에 있는 버튼에 아래와 같이 선언해주면 안쪽 버튼이 눌릴 때 바깥쪽 버튼이 안 눌리는 것을 확인할 수 있다. const onClick = (e: React.MouseEvent) => { e.stopPropagation(); // Do something } 아래는 이를 활용한 예시 코드이다. import "@/styles/components/card.css"; import React from ..