タッチイベントとマウスイベント

スマートデバイス系のタッチイベントと、PC操作時のマウスイベント、どのように処理を共通化すればいいかを調べてみました。

See the Pen wraVLN by satsuki mori (@satsuki) on CodePen.

共通化のポイントは、supportTouchで判別できるとのことです。

var supportTouch = 'ontouchend' in document;
var EVENTNAME_TOUCHSTART = supportTouch ? 'touchstart' : 'mousedown';
var EVENTNAME_TOUCHMOVE = supportTouch ? 'touchmove' : 'mousemove';
var EVENTNAME_TOUCHEND = supportTouch ? 'touchend' : 'mouseup';

あとは、いつも通りeventに上記で設定したeventの変数を使用すれば使い分け可能です。

$hitarea.on(EVENTNAME_TOUCHSTART, handleStart);

プロパティを参照する際は、以下のように参照先をかえます。 jQueryを使用しているため、一度"event.originalEvent"で取り直していました。

var original = event.originalEvent;
  var x, y;
  if(original.changedTouches) {
    x = original.changedTouches[0].pageX;
    y = original.changedTouches[0].pageY;
  } else {
    x = event.pageX;
    y = event.pageY;
  }

話はそれますが、 座標は、サンプル画面左上を(0,0)として、画面右下にいくほどXもYの座標も大きくなります。 なので、サンプル画面左上にドラッグすると-値になりました。

次に、Windows8のようにタッチもマウス操作もできる場合は、上記処理だと"ダメ"みたいですね。。。 タッチ処理しか動かず、マウス操作が一切できなくなるという。。

参考サイト

app.codegrid.net