移動端事件

事件：

    PC：click、mouseover、mouseout、mouseenter、mouseleave、mousemove、mousedown、mouseup、mousewheel、keydown、keyup、load、scroll、blur、focus、change......

    移動端：click(單擊)、load、scroll、blur、focus、change、input(代替keyup，keydown)...Touch事件模型(處理單手指操做)、GESTURE事件模型(處理多手指操做)、

    TOUCH：touchstart、touchmove、touchend、touchcancle

    GESTRUE：gesturestart、gesturechange、gestureend

一、click：在移動端click屬於單擊事件，不是點擊事件，在移動端的項目中咱們常常會區分單擊作什麼和雙擊作什麼，因此移動端的瀏覽器在識別click的時候，只有肯定是單擊後纔會觸發執行；在移動端使用click會存在300ms的延遲：瀏覽器在第一次點擊結束後，還須要等待300ms看是否觸發了第二次點擊，若是觸發了第二次點擊就不屬於click了，沒有觸發第二次點擊才屬於click； fastclick插件解決移動端的click300ms的延遲 FastClick.attach(document.body)：原理是用的事件委託

這裏輸入代碼
<style>
        html,body {
            width: 100%;
            height: 100%;
            background: #eee;
            overflow: hidden;
        }
        .box {
            width:100px;
            height: 100px;
            background: lightblue;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin:auto;

            -webkit-transition:all 1s linear 0s;
            transition: all 1s linear 0s;
        }
    </style>
<div class="box"></div>
    <script charset="UTF-8" type="text/javascript">
        var oBox = document.querySelector('.box');
        //click 會存在300ms的延遲
//        oBox.addEventListener('click', function () {
//            this.style.webkitTransform='rotate(360deg)';
//        }, false)

        function on(curEle,type,fn) {
            curEle.addEventListener(type,fn,false)
        }
        //使用TOUCH事件模擬實現點擊事件操做(單擊$$雙擊)
        on(oBox,'touchstart',function (ev) {
            //ev:TouchEvent => type、target、preventDefault、stopPropagation
            var point = ev.touches[0];
            this['strX'] = point.clientX;
            this['strY'] = point.clientY;
            this['isMove'] = false;
        });
        on(oBox,'touchmove',function (ev) {
            var point = ev.touches[0];
            var newX = point.clientX;
            var newY = point.clientY;

            //判斷是否爲滑動,咱們須要判斷偏移量的值是否在30px之內
            if(Math.abs(newX - this['strX']) > 30 || Math.abs(newY !== this['strY']) > 30){
                this['isMove'] = true;
            }

        });
        on(oBox,'touchend',function (ev) {
            if(this['isMove'] === false) {
                // -> 點擊
                this.style.webkitTransform='rotate(360deg)';
            }else {
                // -> 滑動
                this.style.backgroundColor = 'red'
            }
        })
    </script>

二、點擊、單擊、雙擊、長按、滑動、左滑、右滑、上滑、下滑... 單擊和雙擊(300ms) 點擊和長按(750ms) 點擊和滑動(偏移的X/Y的距離是否在30px之內，超過就是滑動) 左右滑動和上下滑動(X軸偏移的距離 > Y軸偏移的距離 = 左右滑，相反就是上下滑) 左滑和右滑(偏移的距離 > 0 = 右滑 相反就是左滑)

三、移動端事件庫： FastClick.js：解決click事件的300ms的延遲； touch.js：百度雲手勢事件庫 https://github.com/Clouda-team/touch.code.baidu.com hammer.js Zepto.js：被譽爲移動端的小型JQ ,JQ因爲是在PC端使用的，因此代碼中包含了大量的對於IE低版本瀏覽器的兼容處理，而zepto.js之應用於移動端開發，因此在JQ的基礎上沒有對低版本的瀏覽器進行支持 JQ中提供了不少的選擇器類型及DOM操做方法，可是zepto中只是實現了部分經常使用的選擇器和方法

zepto專門爲移動端開發而誕生，因此相對於JQ來講更適合移動端：
zepto的animate動畫方法支持了css3動畫的操做
zepto專門的準備了移動端經常使用的事件操做：tap、singleTap、doubleTap、longTap、swipe、swipeUp、swipeDown、swipeLeft、swipeRight......


在移動端開發中，使用position:fixed固定單位，不少的手機都支持很差，尤爲是在定位的區域還須要輸入內容到跑去虛擬鍵盤的時候會出現許多的問題
解決問題：
    使用局部滾動處理(ISCROLL)