쌤 도와주세요

Question

11:40 부터 진행하는 '폼의 바깥을 누르면 닫히는기능'을 하고 있는데요.. (제 코드에 오타가 있을까봐) AddCard.vue와 List.vue를 전부 복붙도 해봤습니다. 복붙을 해도 안된다면 어디에서 문제가 있는걸까요? 저것만 적으면 잘되던 Add Card도 펼쳐지지 않습니다 ㅠㅠ. 오류를 해결할수있는 방법을 알려주셨으면 합니다. mounted() { this.setupClickOutside(this.$el) }, methods: { setupClickOutside(el) { document.querySelector('body').addEventListener('click', e => { if (el.contains(e.target)) return this.$emit('close') }) } }

정진환 · Answer

Add a Card..버튼을 클릭 하면 AddCard 컴포넌트가 마운트되고 setupClickOutside(this.$el)이 실행되어 리스너등록이 되고 .add-card-btn (Add a Card버튼)을 누른 이벤트가 상위엘리먼트로 버블링됩니다. 그때 버튼보다 상위 엘리먼트에서 같은 이벤트가 일어나는데 이벤트.타켓을 넘겨받고 넘겨받은 버튼엘리먼트가 AddCard컴포넌트 외부에 있어 close가 에밋되버려 바로 닫혀버리는 것 같습니다.

버블링을 막아주셔서

이희영 · Answer

저도 똑같은 문제를 겪었는데 강사님은 어떻게 되셨는지 모르겠지만 e.target이 add-card-btn이 되었을 때 el(여기서 add-card) 이 버튼을 포함하지 않고 있기 때문에 return되지 않고 그대로 진행이 되서 close이벤트가 발생되는 것 같습니다. 따라서 저는 저 조건문에 임시방편으로 e.target.className === "add-card-btn"일 때를 추가해줬는데 동작하고 있습니다. 그렇지만 강사님은 어떻게 되셨는지 궁금합니다 ㅠㅠ

김정환 · Answer

올려 주신 정보만으로는 파악하기가 좀 어려운데요. 지금까지 작업하신 결과물을 올려 주시면 파악하는데 수월할 것 같습니다. (깃헙이나 링크 등등)