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

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

本日のIT謎掛け

「マウスイベント」とかけまして・・・ 「あだち充の数多い漫画」と、ときます。 そのココロは・・・ （登場人物が）ほぼタッチと同じです。

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

PCのwebブラウザで閲覧・操作するサービスを、スマートフォン対応させる時に、ほとんどの人が「レスポンシブデザイン」を考えるだけですが、 マウスイベント操作をタッチイベント操作に置き換えて、それに伴うユーザーインターフェイスの変更も必要になることは、実際に、デザイン構築が完了して、実際に触ってみてから気がつくことが多いです。 今回のブログは、自分の備忘録も含めて、PCサービスをスマホサービスに対応させるために気をつける点をまとめてみました。

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

マウスイベントの流れ onmousedown -> onmousemove -> onmouseup タッチイベントの流れ ontouchstart -> ontouchmove -> ontouchend 基本的に大きく分かるのが、上記イベントで、それを置き換えるだけでいいようにも思えますが、イベント取得する情報が大きく違っているので、ある程度の書き換えが必要になるでしょう。 受け取り側のeventでの注意点は以下の通り // マウスイベント element.addEventListener("mousedown" , function(event){ // マウスで押されたエレメントの取得 var target = event.target; 　　// マウス座標 var pageX = event.pageX; var pageY = event.pageY; // エレメント内のクリックされた座標 var offsetX = event.offsetX; var offsetY = event.offsetY; }); // タッチイベント element.addEventListener("touchstart" , function(event){ // マウスで押されたエレメントの取得 var target = event.touches[0].target; 　　// マウス座標 var pageX = event.touches[0].pageX; var pageY = event.touches[0].pageY; // エレメント内のクリックされた座標 // -> 取れません・・・orz }); 今回は、エレメントをドラッグさせる事が目的だったので、上記のイベント情報を取得したかったんですが、エレメント内のクリックがtouchイベントで取らないことが判明しました。 これは、非常にめんどくさいですね。 とりあえず、クリックしたエレメントのページ内座標を取得して、タッチ座標の差分値で、エレメントのドラッグ表示に対応しました。 ちなみに、エレメントのページ内座標は以下の関数で取得 //指定したエレメントの座標を取得 var element_pos = function(e){ //エレメント確認処理 if(!e){return null;} var t = document.body; //デフォルト座標 var pos={x:0,y:0}; do{ //指定エレメントでストップする。 if(e == t){break} //対象エレメントが存在しない場合はその辞典で終了 if(typeof(e)=='undefined' || e==null){return pos;} //座標を足し込む pos.x += e.offsetLeft; pos.y += e.offsetTop; } //上位エレメントを参照する while(e = e.offsetParent); //最終座標を返す return pos; };

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

イベントリスナーへの登録の際に、PCとスマートフォンを判別するには、以下のように行います。 // pc if(typeof window.ontouchstart === "undefined"){ element.addEventListener("mousedown" , function(event){...}); } // smartphone else{ element.addEventListener("touchstart" , function(event){...}); } "window.ontouchstart"が、存在するかどうかを判定するだけです。 同時に登録してもいいんですが、今現在はGoogleChromeブラウザでしか確認できていないので、自己責任にて行ってくださいませ。

その他の注意点

他にも、clickイベントは、同じように機能するのですが、そもそもPCとスマートフォンでは、マウスとタッチの違いは結構な操作感の違いがあるので、サービスによっては、方式自体を変更しなければいけない場合などもあるので、しっかりとイメージしておく必要があります。 また、CSSのhoverは、スマートフォンでは機能しないのですが、クリックした際に、hoverイベントが発動するという特性があるので、インターフェイスチャックは欠かさず行っておきましょう。 当たり前ですが、mouseoverやmouseoutに該当する機能もスマートフォンには存在しないので、ツール系サービスの場合などは、操作方法をかなり検討しないと、簡単に変更できるとタカを括っていると、僕みたいに痛い目を見ますよ！！！！