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 ）手指按下的位置和手指離開的位置沒有發生改變

本地存儲

sessionStorage（保存數據）

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

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

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();

總結

以上是生活随笔為你收集整理的js(Dom+Bom)第八天的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。