読者です 読者をやめる 読者になる 読者になる

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

jQueryでのtouchイベント

jQuery

スマートフォンでももちろん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;
  });
});