jQuery mobileを使わずにtouchemoveに対応する． #JavaScript

mousemoveイベントを検出してお絵かきする画面を，モバイルでtouchmoveに置き換えた時のメモ．
タッチ系のイベントが充実しているjQuery mobileを使った方がスマート．
jQuery mobileタッチイベント

今回はモバイル対応で追加実装が多くなかったので，jQueryで対応した．

動作環境

Android:4.1.2
Chrome:39.0.2171.59
jQuery:2.1.1

実装例

HTML:タッチ時のスクロールを停止する．

~~canvasがVGA以下なので，画面幅はデバイスのサポート範囲まで目一杯取る．~~
タッチ中に画面移動すると使いづらいので，ユーザスクロールは禁止する．
canvasはHTML上でサイズ指定しないと，座標がおかしくなる．

canvas.html

<head>
 ...
 <meta name="viewport" 
  content="user-scalable=no">
 ...
</head>
<body>
 ...
 canvas id="canvas" class="canvas" width="640px" height="480px"></canvas>
 ...
</body>

JavaScript:タッチイベントの有無でハンドラを変える

'ontouchstart' in windowでタッチイベントの有無を判定してjQueryにtouchmoveハンドラに以下を追加
$('#canvas').bind('touchmove', function() { trackingTouch(); })
canvas上の座標はタッチ/マウスで取得方法が違う．
jQueryにtouchmoveハンドラがないので，オリジナルのDOM event objectからcanvasの座標を取得する必要がある．
- タッチイベント
  var rect = event.target.getBoundingClientRect();
  var x = event.changedTouches[0].clientX - rect.left;
  var y = event.changedTouches[0].clientY - rect.top;
- マウスイベント
  var rect = evt.target.getBoundingClientRect();
  var x = evt.clientX - rect.left;
  var y = evt.clientY - rect.top;

canvas.js

function init() {
  // オリジナルのDOM objectを取得する
  var canvas = $('#canvas')[0];
  var ctx = canvas.getContext('2d');

  ...

  // タッチイベントのサポート可否を調べる
  var isTouch = ('ontouchstart' in window);
  if( isTouch ) {
    $('#canvas').bind('touchmove', function() { trackingTouch(); }); 
  }
  $('#canvas').mousemove(function(evt) { trackingMouse(evt);} );    

}

...

// タッチの軌跡を取得する
function trackingTouch() {
  event.preventDefault();
  // オリジナルのDOM event objectから取得
  var rect = event.target.getBoundingClientRect();
  var x = event.changedTouches[0].clientX - rect.left;
  var y = event.changedTouches[0].clientY - rect.top;

  ...
}

// マウスの軌跡を取得する
function trackingMouse(evt) {

  // jQueryのイベントから取得
  var rect = evt.target.getBoundingClientRect();
  var x = evt.clientX - rect.left;
  var y = evt.clientY - rect.top;

  ...

}

window.addEventListener('load', init, false);

最後に

モバイル系も独自にイベントがあるので，追加実装があったらモバイル用を作ったほうが良さそうです．