ユガラボyugalabpleasuresubculturetechnicalothertechnical【jQuery】コピペOK!タッチ操作とマウス操作の動作定義をまとめるさいきん、スマホでもPCでも同じような動作を求められるWebAPIが増えていますよね。動作はjQueryで書くことになるのですが、もともと用意されているイベント(click,mousemoveなど)ではタッチ操作を拾いきれないことがあります。そこで、二つの環境の動作を同じ関数にまとめる定義を作りました。キャンセルの4種を定義できます。サンプルコードです!動作定義部分と、jQuery拡張部分の二つに分けてご紹介します。上に置いてあるボタンは、こちらのコードで動作しています。//(オプション)範囲外$_this.empty().append('action:out/cancel');$_this.css('background-color','#FFA');});});はい、わりとシンプルな作りですね!jQueryエレメントの挙動を拡張して”touchInterface”というアクションを命令し、その引数として関数を4つ渡しています。まとめるとこんな感じです。$(element).touchInterface(up,[down],[move],[out]);引数はすべてfunction(関数)です。2〜4つ目の引数は省略できます。中から引っ張って下さい。続いて、肝心のjQuery拡張部分です。jQueryの機能を拡張して、「touchInterface」というアクションを定義しています。false;}}).css('cursor','pointer');}});上記のjQuery拡張部分のコードは、JavaScriptソース内のjQuery動作定義部分の外側に記述してください。jQuery本体も忘れずに読み込んでくださいね!拡張部分のポイントは、タッチ系のイベントとマウス系のイベント両方に対して同じイベントをバインドしているところです。PCではmouseoutが呼ばれるのに対し、スマートフォンでは対応するイベントがありません。そこで、挙動を統一する為に、タッチ操作のときのmoveイベント内で、オブジェクトの外に出ていないか判定する処理を設けています。詳しくは、デモページを用意いたしましたので、併せてご覧ください。デモページのソースにはコメントも併記しています。書くタッチイベント以上です!拙い部分もあるやもしれませんが、ご容赦ください。**toolsサイト内検索:toolメルスト祈り計算tool有志追加版データベースtoolエンデュア(ゾンビ)計算機ユガラボの更新をツイートでお知らせ。23:05質問失礼します、スカジィウスさんのピックアップはもう来ないのでしょうか。00:25更新ありがとうございます!毎度毎度楽しく拝読しております。13:23更新お疲れさまです。毎度楽しく読ませていただいております。頭領が棟梁に誤変換さ...管理人のコメント返信についていつもユガラボをご利用くださいまして、誠にありがとうございます。記事へのコメントについて、管理人ユーリからの返信については、赤帯の記事(Subcultureカテゴリ)については控えさせて頂いております。(ただし、誤植のご指摘に伴う修正報告についてはコメント致します)青帯の記事(otherカテゴリ、日記系)についてはなるべく返信できるよう努力いたします。_)mコメント欄については利用者様の情報交換の場としても活用いただけますと嬉しいです。@yugalab以前はここに本人の写真(後ろ姿)を貼ってたんですけど、さすがに古くなったのでやめました。2018年からtwitterはじめました。オフィシャルビジュアルワークス4、まもなく発売です!当サイトはリンクフリーです。当サイトで使用している画像等の著作権は、すべて権利者様に帰属します。何かございましたら、権利者様ご本人よりご連絡をお願い致します。