-
序文
スマートフォンの普及によってタッチイベントをJavascriptから扱うようになって久しいですが、
世の中には「タッチイベントもマウスイベントもサポートしている端末」というものがあります。
そして、こういう端末はマウスでクリックすると「touchstartに続けてmousedownイベントが自動で発火する」
という困った特徴があったりします。
windows8もその一つです。
マウスでもタッチでも操作できるのがこういう端末のUIとしては理想ですが、実装が難しく、
タッチのみに対応させるのが関の山でした（タッチをサポートしてる端末を判定してタッチで処理させる実装）
マウスのみサポートだと、スマートフォンで動きませんからね。。。
しかし、ようやく、この問題をどうにかクリアできる実装を考え出せたっぽいので、ここに公開します。 -
イベントはtouchstart⇒mousedownの順で発生するっぽい
なので、まずイベントハンドラの一つ外側のスコープに即時関数を定義して、
そこにイベントタイプ記録用の変数を用意してnullで初期化します。 -
イベントタイプを判定する
イベントハンドラ先頭で保存したイベントタイプ文字列がtouchstartで、かつ現在のイベントタイプがmousedownか判定する。
判定処理を先に書いて判定結果が真なら何もせずにreturnする（必要に応じてpreventDefaultも実行） -
現在のイベントタイプ文字列を保存する
イベントハンドラの引数にeを書いてe.typeで取れます。 -
保存したイベントタイプをnullクリア
ここが重要です。
クリアしないと次回以降正常動作してくれませんが、クリアをすぐに行ってはいけません。
クリア後にmousedownが発生してしまいます。 -
setTimeout!
はい。「300ミリ秒後」かそれ以上後の時間を設定してsetTimeout内でクリアします。
これで最初のイベントだけを処理対象にできます。 -
応用
フリックスクロールをタッチ、マウス両方で行う方法です。
イベントタイプの保存は同じですが、
touchstart、mousedown時に保存したイベントタイプを
「touchendかmouseup」でnullクリアします。
※タッチ、マウスの座標の取り方の違いを吸収する実装も忘れずに！
さらに、touchmoveでは保存したイベントタイプがtouchstartである場合だけ、
mousemoveでは保存したイベントタイプがmousedownである場合だけ処理を行います。
touchend、mouseupも同様に保存したイベントタイプを見て対応するデバイスのイベントだった場合のみ処理を行います。 -
実際の利用例
僕の公開しているSNSのタイムラインクリック時にメニューを開く実装で利用しています。
（ブラウザのウィンドウ内の高さが狭くなって「返信」ボタンが消えてる状態で機能します）
SNSは以下。