笔记 || 移动端事件（touch）

移动端三个事件：

touchstart——手指按下；

touchmove——手指移动；

touchend——手指松开；

需求：手指按中列表中的某个记录，跳转到该列表的详情页；

bug：手指上滑，会打开某个记录的详情页；

原因分析：移动端触摸事件与电脑相比，较简单，在touchmove事件中，其实触发了了：touchstart->touchmove->touchend，这一系列的事件，因此，如何达到只要其中两个呢？

有两种方法：时间、距离（我参照网上资料，用的是时间）

一、时间：计算从按下到松开的时间差（以下以touchend触发点击事件为例）

touchstart：阻止该事件

touchmove：可以忽略；

touchend：重新计算时间，若时间大于10（ms），则触发点击事件；

具体代码如下：

$(function() {   

    console.log($('.home-book-item'));   

    $(".home-book-item").on(       

        touchstart: function(e) {           

            //长按触发事件           

            timeOutEvent = setTimeout(function() {               

                timeOutEvent = 0;               

                if (e.cancelable) {                   

                    e.preventDefault();               

                  }                       

                }, 1000)       

        },       

        touchmove: function(e) {           

            clearTimeout(timeOutEvent);           

            timeOutEvent = 0;           

            // alert('移动了')       

            },       

            touchend: function(e) {           

                if (e.cancelable) {               

                    e.preventDefault();           

                  }           

                  clearTimeout(timeOutEvent);           

                    if (timeOutEvent >10) {           

                        let url = $(this).attr('data-url')           

                        window.location.href = url;           

                    }            // return false;       

                 }   

            });

        });