移动端事件

事件：

    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)