BLOG

スマホタップ時の処理

2015/2/11

PCサイトではボタン等のマウスオーバー時にイベントを仕掛けるのは一般的ですがスマホ等のタッチデバイスでもタッチ時になんらかのアクションはほしいです。

特にきちんと操作したかどうかを伝えるのはUI的にもとても大事なことです。

タップ時のハイライト等を意識したものは下記になります。

・css

a {
	-webkit-touch-callout:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	-webkit-user-select:none;
}

a.touchstyle {
	background-color: #fff;
}

/* アニメーションをつけたい場合 */
a.touchstyle {
	background-color: #fff;
	-webkit-transition: background-color 1s ease-out;
	-moz-transition: background-color 1s ease-out;
	-ms-transition: background-color 1s ease-out;
	transition: background-color 1s ease-out;
}

a {

-webkit-touch-callout:none;

-webkit-tap-highlight-color:rgba(0,0,0,0);

-webkit-user-select:none;

}

a.touchstyle {

background-color: #fff;

}

/* アニメーションをつけたい場合 */

a.touchstyle {

background-color: #fff;

-webkit-transition: background-color 1s ease-out;

-moz-transition: background-color 1s ease-out;

-ms-transition: background-color 1s ease-out;

transition: background-color 1s ease-out;

}

・js

$(function(){
	$('a').on('touchstart',function(){
		$(this).addClass('touchstyle');
	}).on('touchend',function(){
		$(this).removeClass('touchstyle');
	});
});

$(function(){

$('a').on('touchstart',function(){

$(this).addClass('touchstyle');

}).on('touchend',function(){

$(this).removeClass('touchstyle');

});

-webkit-touch-callout:none;
要素をタップしたときに、iPhoneでは薄いグレー、Androidでは緑やオレンジの枠が表示されます。
-webkit-tap-highlight-colorで、この枠の色を変えることができます。

-webkit-touch-callout: none;
iOSでリンクを長押しした際のポップアップを消すために設定しています。

-webkit-user-select:none;
-webkit-user-selectにnoneを設定すると、要素を選択できなくなります。

ボタン密集しているエリア（ナビ等）ではチカチカしすぎてあまりよくないかもしれません。

Tag:CSS3 JavaScript

BLOG