スマホのタップ対応

jQueryによるスマホタップ対応

Webサイトのスマホ対応にはタップへの対応が欠かせません。
タップ時に反応が返ってくることで、ページがインタラクティブになります。
PC用サイトではCSSの:hoverで対応できますが、スマホではこの:hoverが理想通りに動作しません。
Javascriptによる対応が不可欠です。
今回は、そのためのjQueryコードを掲載します。

必要なjQueryはこれだけ

追加で必要なjQueyコードはこれだけです。

$(function(){
$( '.tap')
.bind('touchstart', function(){
$(this).addClass('ontap');
}).bind('touchend', function(){
$(this).removeClass('ontap');
});
});

html内のタップイベントを捕まえたい要素のクラスにtapというクラスを追加します。
スマホでそのページを開き、その要素にタップしたときに、ontapという要素が追加され、タップが終わったときにontapクラスが削除されます。
CSSには、:hoverを指定したところに、.ontapクラスのCSSを指定すればOKです。

<div class="tap">block
``````CSS
div:hover,
div.ontap {
\tbackground: black;
}