移动端操作与事件

移动端

移动端操作

  • [x] 点击(单击、双击)、长按、滑动、左滑、右滑、上滑、下滑…

    • [ ] 单击–(300MS)–双击–(750MS)–长按
    • [ ] 点击–(30PX)–滑动
    • [ ] 左右滑动和上下滑动(X偏移> Y偏移 为 左右滑)
    • [ ] 左滑和右滑(偏移 > 0 为右滑)

事件

  • [x] PC端事件

    • [ ] mouseover、mouseout、mouseenter(无事件传播)、mouseleave(无事件传播)、mousemove、mousedown、mouseup、mousewheel(鼠标滚轮)
    • [ ] keydown、keyup
    • [ ] click、load、scroll(滚动条)、blur(失去焦点)、focus、change…

  • [x] 移动端事件

    • [ ] click(单击)、load、scroll、blur、focus、change

    • [ ] input(代替keyup keydown)…

    • [ ] TOUCH事件模型(处理单手指操作)

    • touchstart、touchmove、touchend、touchcancle
    • [ ] GESTURE事件模型(处理多手指操作)
    • gesturestart、gestureend、gesturechange

  • 拓展1

    click的PC移动端区别
    1、在移动端click属于单击事件
    2、在移动端使用click会存在300ms的延迟
    touchstart、touchmove、touchend模拟click解决300ms的延迟

  • 拓展2

    e:TouchEvent
    type、target、preventDefault(returnValue)、stopPropagation(cancelBubble)
    changedTouches、touches都是手指集合(TouchList)
    touches只有手指在屏幕上才获取
    所以在touchend事件中如果想获取离开的瞬间坐标只能使用changedTouches获取

模拟移动端click事件

（处理300ms默认延迟）

  • [x] 原生js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    function bandEvent(Ele, type, fn) {
            Ele.addEventListener(type, fn, false); //兼容
        }
        var box = document.querySelector('.box');
        // ->使用TOUCH事件模型实现点击操作(单击&&双击)
        bandEvent(box, 'touchstart', function(e) {
            var point = e.touches[0]; //存第一个手指信息
            this['strX'] = point.clientX;
            this['strY'] = point.clientY;
            this['isMove'] = false;
        });
        bandEvent(box, 'touchmove', function(e) {
            var point = e.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;
            }
        });
        bandEvent(box, 'touchend', function(e) {
            if (this['isMove'] === false) {
                //->点击
                this.style.webkitTransitionDuration = '1s';
                this.style.webkitTransform = 'rotate(360deg)';
                // 恢复初始值实现重复点击
                var delayTimer = window.setTimeout(function() {
                    this.style.webkitTransitionDuration = '0s';
                    this.style.webkitTransform = 'rotate(0deg)';
                }.bind(this), 1000);
            } else {
                //->滑动
                this.style.background = 'red';
            }
        });

  • [x] 引用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <script charset="utf-8" type="text/javascript" src="js/fastclick.min.js"></script>
    // body中使用click事件的延迟300ms都解决了
       FastClick.attach(document.body);
       //->移动端采用CLICK存在300MS的延迟
       box.addEventListener('click', function () {
           this.style.webkitTransitionDuration = '1s';
           this.style.webkitTransform = 'rotate(360deg)';
           var delayTimer = window.setTimeout(function () {
               this.style.webkitTransitionDuration = '0s';
               this.style.webkitTransform = 'rotate(0deg)';
           }.bind(this), 1000);
       }, false);