[에러] 두 개의 이벤트가 겹쳐있을때 - (e.stopPropagation,e.preventDefault)

 

 

0. 문제점

위스키 카드인데 카드를 누르면 "detail"페이지로 이동을 합니다.

또는 하트를 누르면 찜이 되는 기능도 있습니다. 하트를 누를때 하트가 클릭됨과 동시에 "detail"페이지로 이동을 하였습니다.

e.preventDefault 를 사용해서 막으려 했는데 작동을 안해서 검색을 해보니 e.stopPropagation를 사용해야 된다고 하여 이렇게 정리하게되었습니다.

 

"A추가"를 누르면 A가 추가됨과 동시에 Count UP이 되는 것을 확인할 수 있습니다.

 

 

 

1. e.preventDefault() - 이벤트의 기본 동작을 취소

e.preventDefault() 메서드는 이벤트의 기본 동작을 취소합니다. 예를 들어, 링크 클릭 시 페이지를 이동하는 것이나 버튼 클릭 시 폼 제출 같은 기본 동작을 막고 싶을 때 사용할 수 있습니다.

 

"COUNT UP"을 누르면 원래는 www.google.com으로 이동해야하지만 e.prebentDefault()를 통해서 기본 이벤트를 막아두었다.

 

2. e.stopPropagation() - 내 이벤트가 상위 요소로 전파되는 것 막기

e.stopPropagation() 메서드는 이벤트가 현재 요소에서 더 상위의 요소로 전파되는 것을 막습니다. "이벤트 버블링"을 막고 싶을 때 유용합니다.

 

"A 추가"를 누르면 AUP만 작동을 합니다.