webサイト制作の勉強|2017月7月クラスブログ

webサイト制作の勉強に関する解説ブログです。

jQueryでのtouchイベント

スマートフォンでももちろんjQueryの click イベントは基本的に有効です。
しかし、スマートフォンタブレットで click イベントを動かそうとすると、1テンポ遅れたもっさりとした動きになります。

そこで出てくるのが「touch」イベントです。

PCでは判りませんが、スマホで実際に触ってみると違いが明らかに解ります。
clickイベントの記述を「.on('click')」の形で記述していれば簡単に「touch」イベントを追加出来るので、レスポンシブサイトであれば「touch」イベントを積極的に使って行きましょう。
.click()の記述では汎用性が低く、使い勝手が悪いので.on('click')で記述する癖をつけましょう。

デモページ スマホで見ると違いが明らかに解ります。

http://yachin29.webcrow.jp/hum.html


click イベントのみの場合

$(function() {
  $(".btn").on('click', function() {
     $("#menu").slideToggle(200);
    return false;
  });
});


タッチイベントの種類

touchstart : タッチしたときに発生する
touchmove : タッチしたまま動かしたときに発生する
touchend : タッチ状態から離れたときに発生する
touchcancel : タッチ中に電話がかかってきた場合などに発生する(通常は使わない)




clickイベントにtouchendイベントを追加

$(function() {
  $(".btn").on('click touchend',function() {
     $("#menu").slideToggle(200);
    return false;
  });
});

PCで表示させる必要の無いもの(ハンバーガーメニュ)は「touchendイベント」のみを設定させましょう。
「touchendイベント」のみの場合は、スマホ実機、もしくは検証モードでしか動きを確認出来ないので注意して下さい。

$(function() {
  $(".btn").on('touchend',function() {
     $("#menu").slideToggle(200);
    return false;
  });
});