Chrome Android 순간 버튼 피드백

Question

저는 Cordova로 간단한 모바일 앱을 제작할 예정입니다. 좋은 사용자 경험을 위해 사용자가 버튼을 누를 때마다 즉시 피드백을 보내고 싶습니다. 이것은 :active pseudoclass로 수행되어야합니다. 그것은 대부분 작동하지만, '순간적'이지 않습니다.

jsbin here을 참조하십시오.

• 데스크톱 Chrome을 사용하면 버튼을 클릭하면 즉각적인 피드백을 얻을 수 있습니다.
• Android 용 Chrome을 사용하면 버튼을 빠르게 탭하는 것이 빠르게 느껴지 긴하지만 느린 탭 또는 버튼을 길게 누르면 지연이 발생할 수 있습니다 (알아 차리기 어려울 수 있지만 문제가 있습니다).

저는 이것이 스크롤링과 관련이 있다고 생각합니다. Android 설정으로 이동하면 스크롤 옵션 목록이 표시됩니다. 이러한 옵션은 비슷한 지연으로 강조 표시됩니다. 그러나 스크롤 목록에없는 기본 Android 버튼은 절대적으로 즉석입니다 (예 : 오른쪽 상단의 뒤로 버튼 또는 팝업 대화 상자에서 저장/취소).

Chrome에 이러한 버튼이 스크롤 창과 관련이 없으며 즉시 강조 표시되어야한다는 것을 확신시킬 수있는 방법이 있습니까?

이것은 아마 관련이 없지만 html 버튼을 누르고 있으면 강조 표시되지만 손가락을 움직이면 (여전히 버튼 내에서) 강조 표시가 사라집니다. 이것은 기본 안드로이드 버튼의 동작과 일치하지 않습니다.이 버튼은 버튼 안에있을 때만 강조 표시됩니다.

편집 : 나는 (단지 cursor: pointer 작동) -webkit-tap-highlight-color이 :active보다 약간 빠르다는 것을 추가해야하지만, 몇 가지 이유에 대한 수용 가능한 해결책이 아니다 : 당신이 잡고 있으면

1. 하이라이트는 사라 의 버튼을 1 초 이상
2. 그것은 :active과 충돌하는 - -webkit-tap-highlight-color와 합리적인 결과를 얻을 당신이 아무 의미 :active을 제거해야
톤의 크기/모양을 제어 할 수있는 방법은 없습니다
3. 그는 실제 버튼과 일치하지 않을 수 있습니다 (때로는 가장자리 주위 출혈을, 또는 둥근 모서리를 일치하지하고있다)
이

이 해결의 올바른 HTML 방식이 :active이고, 나는 그 모든 경우를 사용하고자하는 강조 가능한.

Answer 1

그것은이 문제를 해결하는 가장 좋은 방법을 보인다는 터치 이벤트를 수신하고 클래스 설정하는 것입니다 :

$('button').on('touchstart', function(e){ 
    $(this).addClass('active'); 
}); 

$('button').on('touchend', function(e){ 
    $(this).removeClass('active'); 
}); 

뿐만 밀접하게 :active pseudoclass 관련이 유지하기를, 내가 active의 클래스를 사용하기로 선택하고 이 같은 두 스타일을 추가 : 자세한 내용은

button:active, button.active { 
    // active style 
} 

, 참조 : http://samcroft.co.uk/2012/alternative-to-webkit-tap-highlight-color-in-phonegap-apps/