【jQuery】スマホのロングタップ(長押し)イベントの実装

Webアプリなどをレスポンシブデザインで作っている時、PCではカーソルホバー、モバイルではロングタップで要素を表示させたりしたい場合があります。意外にもロングタップイベントを受け取る方法が確立されていないので、自分で実装してみました。

その前に

ライブラリを使った簡単な方法

 jquery-longpressというライブラリがあり、jsファイルを読み込んで、以下のようにするだけで簡単に実装できます。

実際に使う時はこんな感じ。

モバイルでロングタップ時にポップアップメニューなどが出てしまう場合は、

を追記。

普通にjQuery感覚で使えてとても便利。

本題

ただ、自分の場合はターゲット要素にonClickイベントを付けていて、上記ライブラリでは、PCで右クリック時も通常クリックとしてイベントが発生(回避方法はあるかも)してしまい、思い通りの実装ができなかった。別のライブラリでも似たものはあるので、良いものがあるかもしれませんが、今回は自分で書くことにしました。

タイトルの通り、スマホの時だけ動作するスクリプトです。

「各パラメーターの設定」のところを環境に合わせて書き換えれば、コピペで動作すると思います。(jQuery読み込みは必須)説明は各所コメントアウトを参照してください。

PCでも長押しイベントを発火したい場合

'touchstart'のところを'mousedown touchstart'
'touchend'のところを'mouseup touchend'

とすれば、PCでも動作します。が、自分のようにターゲット要素にonClickイベントを付けている場合は、なぜかライブラリを使った場合と同じように右クリックも通常クリックとして処理してしまうんですよね。。。いろいろ回避スクリプトを組めば良いのかもしれませんが、諦めました^^

まとめ

ライブラリを使わない場合は、結構泥臭いというか地道な実装になってしまいますね。検索するとたくさんサンプルが出てきますが、使用用途によって微妙に仕様が違うので、中身を理解して自分で実装した方が思い通りのものができるかもです。