[jQuery] [jQuery]モバイル環境を考慮したタッチイベントの実装、onイベント、高速化テクニック

metaの記述

• 表示幅の設定、ズームの禁止

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1">

• 数列が電話番号として認識させない

<meta name="format-detection" content="telephone=no">

タッチできないPCを考慮したタッチイベントの設定

(function ($) {

/* UAがタッチイベントをサポートしているかを判別 */
var isTouch = document.ontouchstart !== undefined;
/*三項演算子　タッチ開始またはマウスダウンを返す*/
var start = isTouch ? 'touchstart' : 'mousedown';
var end = isTouch ? 'touchend' : 'mouseup';

/* onを利用して、変数に格納したイベントを指定する*/
/* hoverアクションをCSSで表現する */
$('#button').on(start, function () {
    $(this).addClass('hover');
  })
    .on(end, function () {
      $(this).removeClass('hover');
    });

}(this.jQuery));

onイベント

• 複数のイベントを指定するなど多様な対応が可能になる app.codegrid.net

jQueryの高速化

• 基本、セレクタ読み込みに処理時間がかかる
• セレクタ指定にIDを使うと高速化
• セレクタは左から読み込まれるため省略すると高速化
• 同じセレクタは変数に格納すると次の読み込みが省略化できる
• 特殊なセレクタ$('#entry-form p:first');等は$('#entry-form p').first();とメソッドに書き換えると高速化 DOMを操作するappend,prependなどは動作が重いため呼び出す回数が少なくなるよう工夫する

millkeyweb.com