タッチイベントの概要
タッチオブジェクトは、タッチポイント、ユーザ操作やタッチスクリーンパネルに応答して、タッチイベントを表します。
タッチタッチイベント | 説明 |
---|---|
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();