笔记 || 移动端事件(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;       

                 }   

            });

        });

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容