모바일,태블릿에서 :active 의사 클래스 대체 방안

:active css pseudo class polyfill

일반적으로 활성화 가상클래스는 사용자가 눌렀다는 것을 인지하도록 사용하곤 합니다. 

하지만 이 테크닉을 모바일에서 사용할 경우에 안드로이드 계열에서 CSS의 :active 가상클래스 동작여부는 가늠할 수 없습니다.

제조사로 인한 크로스플랫폼이 되지 않기 때문에 다른 방안을 강구해야 합니다.

이에 대해 알아봅니다.

:active 활성 가상 클래스 대체 방법

다음의 해결 방법은 빠르고 간단합니다.

javascript

$('.active-element').on({
   'touchstart' : function () {
       $(this).addClass('fake-active');
   },
    'touchend' : function () {
        $(this).removeClass('fake-active');
    }
});

위 코드는 터치시 클래스를 추가했다가 터치를 떼는 순간 클래스를 제거합니다.

이 터치이벤트는 모바일 디바이스에서만 동작합니다. 

모바일에서만 사용할 경우에는 위 코드만 이용하면 되지만 반응형과 같이 여러 플랫폼을 다뤄야한다면 약간의 분기가 필요할 것입니다.

예를 들어 데스크탑에서는 CSS의 :active 클래스를 사용하고 태블릿,모바일에서는 터치이벤트를 이용하는 것입니다.

Jaehee's WebClub