1. 觸屏事件

1.1 觸屏事件概述

移動端浏覽器相容性較好，我們不需要考慮以前 JS 的相容性問題，可以放心地使用原生 JS 書寫效果，但是移動端也有自己獨特的地方。比如觸屏事件 touch（也稱觸摸事件），Android 和 IOS 都有。

touch 對象代表一個觸摸點。觸摸點可能是一根手指，也可能是一根觸摸筆。觸屏事件可響應使用者手指（或觸控筆）對螢幕或者觸控闆操作。

常見地觸屏事件如下：

觸屏touch事件	說明
touchstart	手指觸摸到一個 DOM 元素時觸發
touchmove	手指在一個 DOM 元素上滑動時觸發
touchend	手指從一個 DOM 元素上移開時觸發

<script>
        // 1. 擷取元素
        // 2. 手指觸摸DOM元素事件
        var div = document.querySelector('div');
        div.addEventListener('touchstart', function() {
            console.log('我摸了你');

        });
        // 3. 手指在DOM元素身上移動事件
        div.addEventListener('touchmove', function() {
            console.log('我繼續摸');

        });
        // 4. 手指離開DOM元素事件
        div.addEventListener('touchend', function() {
            console.log('輕輕的我走了');

        });
    </script>

1.2 `TouchEvent` 觸摸事件對象

TouchEvent 是一類描述手指在觸摸平面（觸摸屏、觸摸闆）的狀态變化的事件。這類事件用于描述一個或多個觸點，使開發者可以監測觸點的移動，觸點的增加和減少等等。

touchstart、touchmove、touchend 三個事件都會各自有事件對象。

觸摸清單	說明
touches	正在觸摸螢幕的所有手指的一個清單
targetTouches	正在觸摸目前 DOM 元素上的手指的一個清單
changedTouches	手指狀态發生了改變的清單，從無到有，從有到無變化。

如果偵聽的時一個DOM元素，那麼touches和targetTouches兩個的效果是一樣的。

1.3 移動端拖動元素

【DOM BOM】筆記 7 日移動端網頁特效1. 觸屏事件2. 移動端常見特效4. 移動端常用開發架構5. 本地存儲

注意：手指移動也會觸發滾動螢幕，是以這裡要阻止預設的螢幕滾動

e.preventDefault();

<div></div>
    <script>
        // （1） 觸摸元素 touchstart：  擷取手指初始坐标，同時獲得盒子原來的位置
        // （2） 移動手指 touchmove：  計算手指的滑動距離，并且移動盒子
        // （3） 離開手指 touchend:
        var div = document.querySelector('div');
        var startX = 0; //擷取手指初始坐标
        var startY = 0;
        var x = 0; //獲得盒子原來的位置
        var y = 0;
        div.addEventListener('touchstart', function(e) {
            //  擷取手指初始坐标
            startX = e.targetTouches[0].pageX;
            startY = e.targetTouches[0].pageY;
            x = this.offsetLeft;
            y = this.offsetTop;
        });

        div.addEventListener('touchmove', function(e) {
            //  計算手指的移動距離： 手指移動之後的坐标減去手指初始的坐标
            var moveX = e.targetTouches[0].pageX - startX;
            var moveY = e.targetTouches[0].pageY - startY;
            // 移動我們的盒子 盒子原來的位置 + 手指移動的距離
            this.style.left = x + moveX + 'px';
            this.style.top = y + moveY + 'px';
            e.preventDefault(); // 阻止螢幕滾動的預設行為
        });
    </script>

2. 移動端常見特效

`classList` 屬性

classList 屬性是HTML5新增的一個屬性，傳回元素的類名。但是IE10以上版本支援。該屬性用于在元素中添加，移除及切換CSS類。有以下方法：

添加類

element.classList.add('類名');

移除類

element.classList.remove('類名');

切換類

element.classList.toggle('類名');

2.2 `click` 延時解決方案

移動端 click 事件會有 300ms 的延時，原因是移動端螢幕輕按兩下會縮放（double tap to zoom）頁面。

解決方案：

禁止縮放。浏覽器禁用預設的輕按兩下縮放行為并且去掉 300 ms 的點選延遲。
利用touch事件自己封裝這個事件解決300ms延遲。

原理就是：（1）但我們手指觸摸螢幕，記錄目前觸摸時間。（2）當我們手指離開螢幕，用離開的時間減去觸摸的時間。（3）如果時間小于150ms，并且沒有滑動過螢幕，那麼我們就定義為點選。

【DOM BOM】筆記 7 日移動端網頁特效1. 觸屏事件2. 移動端常見特效4. 移動端常用開發架構5. 本地存儲
使用插件。fastclick插件解決300ms延遲。

3.3 Swiper 插件使用

中文官網位址：https://www.swiper.com.cn/

引入插件相關檔案。
按照規定文法使用。

3.4 其他移動端常見插件

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

iscroll：http://github.com/cubiq/iscroll/。

3.5 插件的使用總結

【DOM BOM】筆記 7 日移動端網頁特效1. 觸屏事件2. 移動端常見特效4. 移動端常用開發架構5. 本地存儲

移動端視訊插件 zy.media.js

【DOM BOM】筆記 7 日移動端網頁特效1. 觸屏事件2. 移動端常見特效4. 移動端常用開發架構5. 本地存儲

4. 移動端常用開發架構

4.1 架構概述

【DOM BOM】筆記 7 日移動端網頁特效1. 觸屏事件2. 移動端常見特效4. 移動端常用開發架構5. 本地存儲

4.2 Bootstrap

【DOM BOM】筆記 7 日移動端網頁特效1. 觸屏事件2. 移動端常見特效4. 移動端常用開發架構5. 本地存儲

5. 本地存儲

随着網際網路的快速發展，基于網頁的應用越來越普遍，同時也變得越來越複雜，為了滿足各種各樣的需求，會經常性的在本地存儲大量的資料，HTML5規範提出了相關解決方案。

本地存儲特性

資料存儲在使用者浏覽器中。
設定、讀取友善、甚至頁面重新整理不丢失資料。
容量較大，sessionStorage約5M、localStorage約20M。
隻能存儲字元串，可以将對象JSON.stringify()編碼後存儲。

window.sessionStorage

【DOM BOM】筆記 7 日移動端網頁特效1. 觸屏事件2. 移動端常見特效4. 移動端常用開發架構5. 本地存儲

<body>
    <input type="text">
    <button class="set">存儲資料</button>
    <button class="get">擷取資料</button>
    <button class="remove">删除資料</button>
    <button class="del">清空所有資料</button>
    <script>
        console.log(localStorage.getItem('username'));

        var ipt = document.querySelector('input');
        var set = document.querySelector('.set');
        var get = document.querySelector('.get');
        var remove = document.querySelector('.remove');
        var del = document.querySelector('.del');
        set.addEventListener('click', function() {
            // 當我們點選了之後，就可以把表單裡面的值存儲起來
            var val = ipt.value;
            sessionStorage.setItem('uname', val);
            sessionStorage.setItem('pwd', val);
        });
        get.addEventListener('click', function() {
            // 當我們點選了之後，就可以把表單裡面的值擷取過來
            console.log(sessionStorage.getItem('uname'));

        });
        remove.addEventListener('click', function() {
            // 
            sessionStorage.removeItem('uname');

        });
        del.addEventListener('click', function() {
            // 當我們點選了之後，清除所有的
            sessionStorage.clear();

        });
    </script>
</body>

window.localStorage

聲明周期永久生效，除非手動删除，否則關閉頁面也會存在。
可以多視窗（頁面）共享（同一浏覽器可以共享）。
以鍵值對的形式存儲。

存儲資料：localStorage.setItem(key, value);
擷取資料：localStorage.getItem(key);
删除資料：localStorage.removeItem(key);
删除所有資料：localStorage.clear();

<body>
    <input type="text">
    <button class="set">存儲資料</button>
    <button class="get">擷取資料</button>
    <button class="remove">删除資料</button>
    <button class="del">清空所有資料</button>
    <script>
        var ipt = document.querySelector('input');
        var set = document.querySelector('.set');
        var get = document.querySelector('.get');
        var remove = document.querySelector('.remove');
        var del = document.querySelector('.del');
        set.addEventListener('click', function() {
            var val = ipt.value;
            localStorage.setItem('username', val);
        })
        get.addEventListener('click', function() {
            console.log(localStorage.getItem('username'));

        })
        remove.addEventListener('click', function() {
            localStorage.removeItem('username');

        })
        del.addEventListener('click', function() {
            localStorage.clear();

        })
    </script>
</body>

【DOM BOM】筆記 7 日移動端網頁特效1. 觸屏事件2. 移動端常見特效4. 移動端常用開發架構5. 本地存儲

1. 觸屏事件

1.1 觸屏事件概述

1.2 `TouchEvent` 觸摸事件對象

1.3 移動端拖動元素

2. 移動端常見特效

`classList` 屬性

添加類

移除類

切換類

2.2 `click` 延時解決方案

3.3 Swiper 插件使用

3.4 其他移動端常見插件

3.5 插件的使用總結

移動端視訊插件 zy.media.js

4. 移動端常用開發架構

4.1 架構概述

4.2 Bootstrap

5. 本地存儲

本地存儲特性

window.sessionStorage

window.localStorage

繼續閱讀

前端和背景是如何互動的？

怎樣使用SpringMVC控制頁面

Spring MVC 接收多個實體參數

CSS中僞類和僞元素的差別

Vue項目 - 單檔案元件和Vue中的路由

左耳朵耗子：程式員如何拿到年薪60萬的崗位？

沒救了! 困擾程式員一輩子的5個魔咒, 改掉比登天還難！

[轉]如何成長為一名全棧工程師全棧工程師

underscore模闆功能的使用和學習

CSS之折疊菜單

web開發之前後端渲染

JavaScript的那些坑之事件代理事件代理事件階段

ACS基本配置-權限等級管理

vue （vue2.0）使用總結(從大體結構總結)

父子元件間傳值的實作父子元件間傳值的實作

vue搭建過程及出現問題

【DOM BOM】筆記 7 日 移動端網頁特效1. 觸屏事件2. 移動端常見特效4. 移動端常用開發架構5. 本地存儲

1. 觸屏事件

1.1 觸屏事件概述

1.2 TouchEvent 觸摸事件對象

1.3 移動端拖動元素

2. 移動端常見特效

classList 屬性

添加類

移除類

切換類

2.2 click 延時解決方案

3.3 Swiper 插件使用

3.4 其他移動端常見插件

3.5 插件的使用總結

移動端視訊插件 zy.media.js

4. 移動端常用開發架構

4.1 架構概述

4.2 Bootstrap

5. 本地存儲

本地存儲特性

window.sessionStorage

window.localStorage

繼續閱讀

【DOM BOM】筆記 7 日移動端網頁特效1. 觸屏事件2. 移動端常見特效4. 移動端常用開發架構5. 本地存儲

1.2 `TouchEvent` 觸摸事件對象

`classList` 屬性

2.2 `click` 延時解決方案