JavaScript

移動端事件介紹

• touch事件類型

  移動設備上無法使用鼠標，當手指按下屏幕的時候會觸發 click,mousedown,mouseup事件，但是在移動設備上有專門的事件： touch
  備注：
  在移動端touch事件需要通過事件監聽的方式添加
  

  • touchstart 手指按下觸發事件

  • touchmove 手指移動觸發的事件

  • touchend 手指離開時候觸發的事件

• touch事件對象

  • 屬性

    • 事件對象.touches [位于屏幕上手指列表]

       ? touches 用來獲取位于屏幕上的手指信息【手指個數】
      

    • 事件對象.targetTouches[位于該元素上的手指列表]

       ? 用來獲取當前點擊元素時候，手指信息【手指個數,手指唯一標識ID】
      

    • 事件對象.changedTouches[當手指離開屏幕時候的信息，在touchend事件中使用該屬性獲取手指列表]

       ? changedTouches 用來獲取當手指離開屏幕時候的手指信息，一般在touchend事件中使用該屬性獲取手指信息
      

  • 手指位置

    • 手指對象.clientX/Y 手指相對于視口的水平/垂直距離【參照可視區域】

    • 手指對象.pageX/Y 手指相當于視口的水平/垂直距離【如果有滾動條，包括滾動條滾動后的距離】

  • click延時

    1. click 比 touch 延時約300毫秒 【時間不標準】
    

• 手勢封裝

• 模擬點擊（tap）

   核心：（touchstart + touchend ）手指按下的位置和手指離開的位置沒有發生改變
  

本地存儲

1. sessionStorage（保存數據）

   1. 數據只能在同一個頁面中數據，不能跨頁面訪問
   2. 頁面關閉后數據隨之銷毀
   3. 不屬于持久性本地存儲
   4. 大小為5M
   

   • window.sessionStorage.setItem(k,value);
   • window.sessionStorage.getItem(k);
   • window.sessionStorage.removeItem(k);
   • window.sessionStorage.clear();

2. localStorage(保存數據)

   1. 數據可以實現不同頁面之間的相互訪問
   2. 數據需要手動刪除，屬于持久化存儲
   3. 大小為約20M
   

   • localStorage.setItem(k,value);
   • localStorage.getItem(k);
   • localStorage.removeItem(k);
   • localStorage.clear();

• localStorage.getItem(k);
• localStorage.removeItem(k);
• localStorage.clear();