ひなたの雑記帳ひなたの雑記帳ジャンル問わずにまとめるブログ。FuelPHPテスト実行時、\Request::$mainが初回のforge時の状態から更新されないフォローは常に相互フォローの承認制、毎日午前5時でログがリセットされるツイッター風SNS、todays!をリリースしました。世の中には「タッチイベントもマウスイベントもサポートしている端末」というものがあります。いう端末はマウスでクリックすると「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は以下。カテゴリーに公開されました。フィードで購読することができます。コメントを残すか、ご自分のサイトからトラックバックすることができます。コメントをどうぞ返信をキャンセルする。