• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

wrap 안에 click 이벤트

22.10.20 15:57 작성 조회수 107

0

안녕하세요, 현재 앨범을 클릭하면 유튜브 페이지로 넘어가게 되어있지만 저는 클릭했을 때 음원을 재생하고 싶습니다.

그래서 click이벤트를 사용하여 이벤트를 실행하려 했지만, 전체 wrap에 touch이벤트가 걸려서 인지 안에 앨범을 클릭했을때 전혀 반응을 안합니다ㅜㅜ 혹시 전체적으로 감싸져 있는(wrap) 영역 안에 click를 걸게 하려면 어떻게 작성을 해야하나요..?ㅠㅠ

touch이벤트는 작성해주신 대로 사용하였고, 제가 따로 작성한 click이벤트는 아래와 같이 작성하였습니다.

모바일일때 click 이벤트의 console이 안찍힙니다. 아니면 모바일에서는 무조건 touch이벤트만 사용해야하나요?

for(let i = 0; i<totalNum; i++){
  if(mobileChk()){
     album[i].addEventListener("click", function(){
       console.log(this);
     })
  }else{
    album[i].addEventListener("mouseover", function(){
    var itmes = this.querySelector('audio').play();
       if (itmes) {
         itmes.catch(function(error) { console.error(error) });
       }
       this.addEventListener("mouseout", function(){
         this.querySelector('audio').currentTime = 0; // 재생 위치를 처음으로 설정
         this.querySelector('audio').pause();//일시정지
       })
    })
  }
}

 

답변 1

답변을 작성해보세요.

1

안녕하세요.

일단 a태그에 href="#" 이렇게 바꿔주세요 traget도 빼주시고요.

for (let i = 0; i < album.length; i++) {
        album[i].onclick = function () {
            alert(i);
            //document.querySelector('audio').play();
        };
    }

위처럼 해주시면 alert이 순서대로 다 찍힙니다.

원하시는 음원을 play해주시면 될 것 같아요.

audio가 album 하위에 있다면 아래처럼 해도 되겠네요.

for (let i = 0; i < album.length; i++) {
        album[i].onclick = function () {
            album[i].querySelector('audio').currentTime = 0;
            album[i].querySelector('audio').play();
        };
    }

 

세세하게 답변주셔서 감사합니다! 다시 도전해보겠습니다 ^^