자바스크립트 자식요소 클릭 시, 부모 a href 홀드 기능

Question

안녕하세요, ul card를 a 태그로 전체 영역을 잡고 하트를 클릭했을 때는, 부모 a의 href기능을 홀드하려고 합니다.. (하트 클릭 시, 링크 이동 x). 하트를 css로 z-index로 띄워도 부모가 a라 안되는 것같아서 javascript로 처리하려고 하는데, 처음에 시도한 것은 하트를 for loop로 돌리고 하트를 클릭했을 때 토글이 되게끔하고 하트가 아닌영역을 javascript로 잡으려고하니까 생각보다 좋은 아이디어가 아닌 것같아서 방향을 바꿔서 ul card를 for loop로 돌리고 하트를 클릭했을 때 remove attribute를 시도했는데도 안되더라구요..ㅎㅎ 두 번째 방법을 시도할 때 e.target으로 하트를 잡아볼까 했지만 svg로 넣어서 좋은 방법은 아닌 것같아서 if(clicked)로도 잡아보다가 addEventListener로까지 빼보았는데 remove attribute가 계속 안되는 것같아서 ㅎㅎ 혹시 제가 어디서 놓치고 있는건지 아니면 다른 방법이 있는건지 알려주실실 수 있으실까요? ㅜㅜ 첫번째 코드는 이렇게 작성했구 const heart_status &#61; document.querySelectorAll('.heart-status') for (let i &#61; 0; i < heart_status.length; i&#43;&#43;) { const heart_parent &#61; heart_status[i].closest('.swiper-slide') const heart_parent_link &#61; heart_status[i].closest('.topicContent-itemList a') const mzpopup_bookList_liked &#61; document.querySelector('#mzpopup_bookList_liked') heart_status[i].addEventListener('click', function () { heart_parent.classList.toggle('liked') // heart_parent_link.removeAttribute('href'); if(heart_parent.classList.contains('liked')){ mzpopup_bookList_liked.classList.add('show') }else {} setTimeout(function () { mzpopup_bookList_liked.classList.remove('show') }, 900); }) } 두번째는 이렇게 작성해보았습니다..ㅎㅎ const heart_parent &#61; document.querySelectorAll('.swiper-slide') for (let i &#61; 0; i < heart_parent.length; i&#43;&#43;) { const mzpopup_bookList_liked &#61; document.querySelector('#mzpopup_bookList_liked') heart_parent[i].addEventListener('click', function () { const heart_parent_link &#61; this.querySelector('.topicContent-itemList a') const heart_status &#61; this.querySelector('.heart-status') console.log(heart_parent_link) heart_status.addEventListener('click', heart_handler) }) function heart_handler() { const heart_status &#61; this.querySelector('.heart-status') const heart_parent_link &#61; heart_parent[i].querySelector('.topicContent-itemList a') heart_parent_link.removeAttribute('href', &#34;/taste_en/ssLesson/bookList_01.php&#34;); heart_parent[i].classList.toggle('liked') if (heart_parent[i].classList.contains('liked')) { mzpopup_bookList_liked.classList.add('show') setTimeout(function () { mzpopup_bookList_liked.classList.remove('show') }, 500); } } }

hhj · Accepted Answer

event.stopPropagation() 이걸 하트의 온클릭 이벤트에 넣어도 안되나요?

Haileyang · Answer

아! 저는 계속 remote Attribute 만 생각했었는데 stopPropagation 하고 preventDefault 는 처음알아서 덕분에 참고해서 해결했습니다! stopPropagation 말고preventDefault 로 해서 됬습니다 :) 제가 오전 내내 ㅎㅎ 코드를 여러번 바꿔가면서 해본건데 이렇게 도와주셔서 금방 해결할 수 있었습니다 감사합니다 ! 좋은하루되세요 ㅎㅎ

자바스크립트 자식요소 클릭 시, 부모 a href 홀드 기능

2개의 답변

#click 목록