一般的なプラグインは、モバイルエンド遅延の問題をクリックしてローカルに保存されたタッチイベントオブジェクト

タッチイベントの概要

タッチオブジェクトは、タッチポイント、ユーザ操作やタッチスクリーンパネルに応答して、タッチイベントを表します。

タッチタッチイベント 説明
touchstart DOM要素へのトリガーフィンガータッチ
touchmove ばね指DOM要素を移動する場合
touchend DOM要素がから分離されたばね指

タッチイベントオブジェクト

たTouchEventは、指タッチの平面内のイベントのクラスは、1つまたは複数の連絡先を記述するために使用されるそのようなイベントの状態の記述を変更しています。

タッチ一覧 説明
touches タッチスクリーンは、すべての指のリストです
targetTouches (touchstartが存在後の)リストの現在のDOM要素に触れる指
changedTouches 指リストのステータスは最初から、そこから(そこの後touchend)に、変更されました

トランジションの終了イベント

// 过渡动画结束之后出发该事件
div.addEventListener('transitionend', function () {});

遅延ソリューションをクリックしてください

携帯端末のブラウザから、モバイル300msの遅延が発生します最後にクリック、ダブルタップズーム画面(ズームにダブルタップ)効果があります

ソリューション:

  • ズーム禁止 <meta name="viewport" cotnent="user-scalable=no">
  • パッケージタップ機能し、原則
    • touchstartそして、touchend少ないクリック以上であることが決定。イベントによってトリガーされたとき150msの以上かどうかを確認し、記録されています。
  • 遅延解決するfastclickプラグインhttps://github.com/ftlabs/fastclickを

モバイルエンド共通のプラグイン

superslide:http://www.superslide2.com/

swiper:https://www.swiper.com.cn/

スクロール:https://github.com/cubiq/iscroll

:携帯ビデオプレーヤープラグイン終了https://github.com/ireaderlab/zyMediaを

ローカルストレージ機能

図1に示すように、ブラウザに格納されたデータ

図2に示すように、でも、データを失うことなく、ページを更新し、読みやすい、設定します

図3に示すように、大容量、sessionStorage約5MからlocalStorage約20Mまで

図3に示すように、文字列を格納することができ、目的とすることができるJSON.stringify()符号化処理

window.sessionStorage

1、ブラウザウィンドウのライフサイクルが閉じています

図2に示すように、同じ画面(ページ)のデータを共有することができます

図3に示すように、キーと値のペアの形式で

// 存储数据 sessionStorage.setItem(key, val)
sessionStorage.setItem('uname', val);
// 获取数据 sessionStorage.getItem(key)
sessionStorage.getItem('uname');
// 删除数据 sessionStorage.removeItem(key);
sessionStorage.removeItem('uname');
// 删除所有数据 sessionStorage.clear()
sessionStorage.clear();

window.localStorage

1、ライフサイクル永久、手動で削除しない限り、そうでない場合は閉じるがあります

図2は、共有データへのマルチ画面(ページ)とすることができます

図3に示すように、キー値を格納するために

// 储存数据 localStorage.setItem(key, val);
localStorage.setItem('username', 'admin');
// 获取数据 localStorage.getItem(key);
loclaStorage.getItem('username');
// 删除数据 localStorage.removeItem('username');
localStorage.removeItem('username');
// 删除所有数据 localStorage.clear();
localStorage.clear();

おすすめ

転載: www.cnblogs.com/article-record/p/12629843.html