使用原生JS封装Tap事件,解决移动端300ms延迟

高洛峰
풀어 주다: 2016-11-19 11:28:56
원래의
1744명이 탐색했습니다.

FastClick

现在有现成的插件fastclick可以解决这个问题,但是也有弊端:

GitHub上最新版本的插件大小为25.4kb,轻量为趋势,能省则省。

它的核心思想是取消默认的click时间,判断当前dom节点的类型进行相应的操作,这个判断过程较为繁琐。

MyTapEvent

本人最近在做微信项目,由于fastclick插件存在一定弊端,因此开发了一个简单的tap事件,主要思想有以下几点:

Thinking

一次tap事件包含touchstart和touchmove(轻微移动)以及touchend三种状态

callback方法在touchend后执行

根据chrome浏览器默认的判断取消点击的移动量,手指偏移量(水平或垂直)超过15px则判定为滚动,取消执行tap事件

手指按下时间过长不视为点击,默认时间间隔为500ms

使用HTMLElement来扩充原型,方便添加Event

使用单例模式,确保只加载一次

ok,思想定下来,代码写起来就清晰多了:

if (!HTMLElement.prototype.addTapEvent) {
    HTMLElement.prototype.addTapEvent = function(callback) {        var tapStartTime = 0,
            tapEndTime = 0,
            tapTime = 500, //tap等待时间,在此事件下松开可触发方法
            tapStartClientX = 0,
            tapStartClientY = 0,
            tapEndClientX = 0,
            tapEndClientY = 0,
            tapScollHeight = 15, //水平或垂直方向移动超过15px测判定为取消(根据chrome浏览器默认的判断取消点击的移动量)
            cancleClick = false;        this.addEventListener('touchstart', function() {
            tapStartTime = event.timeStamp;            var touch = event.changedTouches[0];
            tapStartClientX = touch.clientX;
            tapStartClientY = touch.clientY;
            cancleClick = false;
        })        this.addEventListener('touchmove', function() {            var touch = event.changedTouches[0];
            tapEndClientX = touch.clientX;
            tapEndClientY = touch.clientY;            if ((Math.abs(tapEndClientX - tapStartClientX) > tapScollHeight) || (Math.abs(tapEndClientY - tapStartClientY) > tapScollHeight)) {
                cancleClick = true;
            }
        })        this.addEventListener('touchend', function() {
            tapEndTime = event.timeStamp;            if (!cancleClick && (tapEndTime - tapStartTime) <= tapTime) {
                callback();
            }
        })
    }
}
로그인 후 복사

Usage

HTMLElement.addTapEvent(function(){    //do something...})
如:document.querySelect('#test').addTapEvent(function(){
    alert('this is a tap event');
})
로그인 후 복사

Case

这里给一个移动端案例,同时也包含了闭包的知识,前20项为tap事件,后30项为click事件,大家可以在手机上试一下效果,感受一下两种方法的差别:


    
        
        
        
        
        
        
        
        test
    
    로그인 후 복사


    관련 라벨:
    js
    원천:php.cn
    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    인기 튜토리얼
    더>
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿
    회사 소개 부인 성명 Sitemap
    PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!