[css&vue] 모바일 브라우저에서의 active 타이밍 이슈

현재 구현 진행하고있는 vue.js webapp에 press효과가 요구되는 부분이 있었다.

 

onclick이벤트로 아이템 선택 이후 화면 전환이 일어나는 시나리오로, 여타 press효과 구현과 같이 단순하게 css에서 active속성을 줘서 press효과를 구현하였고 PC Chrome환경에서 테스트 했을 때는 Ok라서 적용.

그런데 실제 실행 환경에서 press효과를 확인 할 수 없다는 이슈가 보고됐다.

 

확인해보니 long press가 아니면 화면에서 확인할 수가 없었음. 

 

 

타이밍이슈인건 알겠는데 active속성만 믿고있었던 터라 대체 뭐가 문젠지 몰라 혼자 hover도 적용해보고 (마우스 커서가 있는 환경이 아니라 실패했다.) 서치해봤는데 해결이 안돼서

결국 다른 팀에 물어보니 비슷한 이슈가 있어 touchstart event로 처리를 하고 있다는 것이다.

 

touchstart로 keyword를 잡고 찾아보니 좀 더 자세히 알 수 있었다.

 

active 가상 클래스가 적용되는 순서가 생각보다 뒤였음. 지금 찾아보니까 안나오네.. 어디서 본 거지?

mouse입력이 들어가고 0.몇초 뒤에 active 가 적용된다는 소리였는데 좀 더 자세하게 찾으면 추가하는걸로.

 

 

 

사용자 입력 이벤트는 아래와 같은 순서로 발생한다고 한다.

touchstart - touchmove - touchend - mouseover - mousemove - mousedown - mouseup - click

출처 : https://black7375.tistory.com/79

 

특히 최근의 모바일 환경에서는 사용자 상호작용을 위해 touchevent를 사용하고 있다고 한다.

touchstart eventlistener를 걸어주면 끝이였다.

 

 

 

document자체에 touchstart/ touchend eventlistener를 걸어주고,

touchstart event를 수신한 target에 'active'속성을 부여하고 touchend를 수신하면 'active'속성을 제거하는 방향으로 구현했다.

 

처음엔 addClass로 구현했는데, 'event.target.addClass is not a function' 에러가 떠서 확인해보니

vue.js에서는 addclass와 removeclass를 지원하지 않는다고.

 

그래서 classList에 직접 add하고 remove하도록 구현해서 완료!

      document.addEventListener('touchstart', function (event) {
        var targetElement = event.target || event.srcElement
        targetElement.classList.add('active')
      })
      document.addEventListener('touchend', function (event) {
        var targetElement = event.target || event.srcElement
        targetElement.classList.remove('active')
      })

 

 

document자체에 listener를 걸어 굳이 이벤트 발생 엘리먼트를 인자로 받아오는 이유는...

element를 받아오는 과정에서도 꽤나 삽질을 했기 때문인데 그건 다른 포스트로 작성하기로...