touch系イベントで,:active代わりのclassを付けたり外したりする

Androidで :active 擬似クラスが反応してくれてない?

iOS付属のSafariだと,a要素をタップしてる最中に:active擬似クラスが有効になっているようなんですが,Androidだと同じ実装ではうまく反応してくれなかったので,touchstarttouchendでクラスをトグルして代用します.

GalaxySの標準ブラウザしか見てないので,ブラウザの挙動については話半分で読んでもらえると助かります.正確な情報も大歓迎.

スニペットを例示してみる

例によってjQueryでサンプル.要素をタップし始めたときにtch-activeクラスが付き,離したらtch-activeクラスが外れます.

jQueryはコードが短く整理されるので,小さいスニペットの説明用コードには便利ですね

var $elm = $(selector);
$elm.bind('touchstart', function() {
    $(this).addClass('tch-active');
});
$elm.bind('touchend', function() {
    $(this).removeClass('tch-active');
});

jQuery Mobileとかで対象の要素が新しく追加されるようであれば,$elm.bindになってるところを,$elm.liveに置き換えればOKです.

/* 適当な押下表現のためのスタイルとかね */
.tch-active {
    position: relative;
    top: 1px;
    left: 1px;
    -webkit-box-shadow: 0 1px 5px #CCC;
}

で,tch-activeクラスに適当なスタイルを割り当てれば,大体どんな要素でもタップして触ってる感が出せると思います.これつけないと,どんなボタンも触った感じがペラペラに...