webサイト制作の勉強|1月ブログ

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;
  });
});


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

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