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

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

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

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

---