jstarted.com
JavaScript/HTML/CSSのノウハウや覚書を掲載するブログ
2014.2.17

タッチイベントの基礎フレームワーク

Category:

スマフォ用サイトの動的UIでは多用する、タッチの座標取得からイベント着火までの一式をまとめました。タッチイベントはtouchstart、move、endと分かれていて最初はとっつきにくかったですが、流用しやすいコードでもあります。

以下、取得した座標をコンソールに出力するだけのサンプルコードです。

var $parent = $('.touch'),
    touch_start_coordinate = {
      x : 0,
      y : 0
    },
    touch_end_coordinate = {
      x : 0,
      y : 0
    },
    swipe_started = false,
    swipe_now = false;

var touch_move_fnc = function(x, y){
  console.log('moving', x, y);
};

var touch_end_fnc = function(x, y){
  console.log('ended', x, y);
};

$parent.on('touchstart', function(e){
  if( swipe_started === false ){
    swipe_started = true;

    touch_start_coordinate.x = e.originalEvent.changedTouches[0].pageX;
    touch_start_coordinate.y = e.originalEvent.changedTouches[0].pageY;
  }
});

$parent.on('touchmove', function(e){
  if( swipe_started === true || swipe_now === true ){
    touch_end_coordinate.x = e.originalEvent.changedTouches[0].pageX;
    touch_end_coordinate.y = e.originalEvent.changedTouches[0].pageY;
  }

  if( swipe_started === true && swipe_now === false ){
    if( Math.abs( touch_start_coordinate.y - touch_end_coordinate.y ) > 10 ){
      swipe_started = false;
    }
    if( Math.abs( touch_start_coordinate.x - touch_end_coordinate.x ) > 10 ){
      swipe_now = true;
    }
  }

  if( swipe_now === true ){
     e.preventDefault();
    touch_move_fnc(touch_start_coordinate.x - touch_end_coordinate.x,
      Math.abs(touch_start_coordinate.y - touch_end_coordinate.y));
  }
});

$parent.on('touchend', function(){
  if( swipe_now === true ){
    touch_end_fnc(Math.abs(touch_start_coordinate.x - touch_end_coordinate.x),
      Math.abs(touch_start_coordinate.y - touch_end_coordinate.y));
    swipe_started = false;
    swipe_now = false;
  }
});

動作のサンプルはこちら
タッチイベント一連(touchstart / touchmove / touchend) - jsdo.it

jstarted.comはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を
獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、
Amazonアソシエイト・プログラムの参加者です。

クリエイティブ・コモンズ・ライセンス
jstarted.com by yoichi kobayashi is licensed under a Creative Commons 表示 3.0 非移植 License.