[Javascript] 単純にmouseイベントをtouchイベントに置き換えたら苦労した話

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

こんにちわ。
 

効率化を考えるのが好きだけど、人にそれを押し付けると嫌がられることもわかっている、下駄です。
 

本日のIT謎掛け。
 

「マウイベント」とかけまして、
 

「あだち充の数多い漫画」と、ときます。
 

そのココロは・・・
 

(登場人物が)ほぼタッチと同じです。

webサービスのスマートフォン対応

PCのwebブラウザで閲覧・操作するサービスを、スマートフォン対応させる時に、ほとんどの人が「レスポンシブデザイン」を考えるだけですが、
 

マウスイベント操作をタッチイベント操作に置き換えて、それに伴うユーザーインターフェイスの変更も必要になることは、
 

実際に、デザイン構築が完了して、実際に触ってみてから気がつくことが多いです。
 

今回のブログは、自分の備忘録も含めて、PCサービスをスマホサービスに対応させるために気をつける点をまとめてみました。

マウスイベントとタッチイベントの違い

マウスイベントの流れ
 

 

タッチイベントの流れ
 

 

基本的に大きく分かるのが、上記イベントで、それを置き換えるだけでいいようにも思えますが、イベント取得する情報が大きく違っているので、ある程度の書き換えが必要になるでしょう。
 

受け取り側のeventでの注意点は以下の通り
 

 

今回は、エレメントをドラッグさせる事が目的だったので、上記のイベント情報を取得したかったんですが、エレメント内のクリックがtouchイベントで取らないことが判明しました。
 

これは、非常にめんどくさいですね。
 

とりあえず、クリックしたエレメントのページ内座標を取得して、タッチ座標の差分値で、エレメントのドラッグ表示に対応しました。
 

ちなみに、エレメントのページ内座標は以下の関数で取得
 

イベント起動で気をつける点

イベントリスナーへの登録の際に、PCとスマートフォンを判別するには、以下のように行います。
 

 

“window.ontouchstart”が、存在するかどうかを判定するだけです。
 

同時に登録してもいいんですが、今現在はGoogleChromeブラウザでしか確認できていないので、自己責任にて行ってくださいませ。

その他の注意点

他にも、clickイベントは、同じように機能するのですが、そもそもPCとスマートフォンでは、マウスとタッチの違いは結構な操作感の違いがあるので、
サービスによっては、方式自体を変更しなければいけない場合などもあるので、しっかりとイメージしておく必要があります。
 

また、CSSのhoverは、スマートフォンでは機能しないのですが、クリックした際に、hoverイベントが発動するという特性があるので、インターフェイスチャックは欠かさず行っておきましょう。
 

当たり前ですが、mouseoverやmouseoutに該当する機能もスマートフォンには存在しないので、ツール系サービスの場合などは、操作方法をかなり検討しないと、簡単に変更できるとタカを括っていると、僕みたいに痛い目を見ますよ!!!!

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です