링크에 포함된 버튼, onClick 링크의 체인 효과를 중지하는 방법

Question

아래 예와 비슷한 코드가 있습니다. 사용자를 URL로 보내는 클릭 가능한 그리드 셀을 만들려고 하는데 포함된 이미지 버튼을 클릭하면 onClick 이벤트만 실행되고 다른 이벤트는 실행되지 않기를 원합니다. 이렇게 할 수 있습니까? stopPropagation에 대한 호출을 추가하려고 시도했지만 첫 번째 onClick이 처리된 후에도 여전히 기본 링크에 연결됩니다.

const handlerSaveClick = async (e, 액티비티, 인덱스) =>
  e.stopPropagation();
  ...
}

<그리드 항목>
  handleLinkClick(payload.url, index)}
  >
    <툴팁 제목={payload.title}>
       <타이포그래피 className={clsx(classes.copy)}>
                   {페이로드.제목}
       
       
          <버튼
                  클래스이름={clsx(classes.savedButton)}
                  onClick={(e) =>handleSaveClick(e, 페이로드, 인덱스)}
          >
            
          
  

Answer 1

handleSaveClick 함수에서는 e.preventDefault() 함수를 사용할 수 있습니다. 이미지 삽입 버튼을 클릭하면 handlerSaveClick 함수가 실행됩니다. e.preventDefault()는 링크의 기본 동작을 방지하여 링크가 URL로 이동하지 않도록 해야 합니다.

으아악

또한 클릭 가능한 영역이나 버튼의 앵커 태그를 다른 적절한 요소로 바꾸는 것을 고려해야 합니다.