TIL 7/20 form 중첩

프로젝트의 post 기능을 하던 중

 

글을 작성하는 폼 안에서 지도의 검색기능을 추가했다.

 

form속에 form이 있는 구조였는데

 

submit 이벤트가 발생했을 때 기본동작인 새로고침을 막는 게 안 됐다.

 

두 폼의 이벤트핸들러에서 preventDefault를 사용했지만 지도 검색을 했을 때 새로고침 됐다.

 

처음엔 이벤트버블링이 원인인 줄 알고

 

e.current != e.currentTarget 이런 식으로 조건도 부여해 봤지만 실패했다.

 

찾아보니 form안에 form을 사용하면 안됐다.

 

사용하더라도 onSumit 이벤트를 사용하면 상위의 form만 작동했다.

 

결국 자식요소의 form은 시멘틱적 요소로만 사용하고

 

onCick과 onKeyPress이벤트를 사용했다.