明滅するプログラマの思索

WEBエンジニアとして勤務している一介の男が、日々気づいたことをまとめるブログです

PC と Smartphone で共有のクリック時イベントを実装する

jQuery を使って、ある要素をクリックしたときのイベントを実装する場合、PC と Smartphone で同じ挙動を実装しようとすると、ちょっとした問題にぶつかります。
それは、イベントハンドラを何にすればよいか?という問題です。
PC 向けであれば click イベントを使用すれば問題ないでしょう。
Smartphone 向けの場合 click はダブルクリックの検出を行うため、平たく言えば画面から指を離した後に発火します。非常にもっさりとした動作となるため、それを避ける意味で touchstart をイベントハンドラとして実装すると良い感じに動きます。
では、PC と Smartphone のどちらでも同じようにイベントを発火させたい場合、どのようにイベントハンドラを設定してあげればよいでしょう。

実装環境

ソフトウェア バージョン
jQuery 2.1.1

コード

結論から書いてしまいますが、以下のような記述でOKです。

<div id="button">
イベント実行
</div>

<script>
$('#button').on('touchstart mousedown', function(e) {
    // イベント内容を実装する
});
</script>

jQuery の on() メソッドには複数のイベントハンドラを指定できますので、ここでは touchstart と mousedown を指定しています。
touchstart は Smartphone 向けのイベントハンドラで、PC では発火しません。
逆に mousedown は PC でのみ発火します。

ちなみに、PC では touchstart イベントハンドラが発火しないことを利用して、以下のように記述することもできます。

<script>
var event_click = ('ontouchstart' in window) ? 'touchstart' : 'click';
$('#button').on(event_click, function(e) {
    // イベント内容を実装する
});
</script>

上記の例では、window オブジェクトに ontouchstart プロパティが設定されているかを判定しています。
設定があれば touchstart を、なければ click を変数 event_click に代入し、イベントハンドラとして使いまわします。
この方法のデメリットは、なんらかの外部的要因によって ontouchstart プロパティが設定されてしまっていると、PC で誤認してしまうということです。
サードパーティjQuery ライブラリを使用する場合、注意が必要かもしれません。