Hammer.js v1.0.5 在Surface上使用Chrome时,手指点击时放大

问题背景:
使用Hammer.JS - v1.0.5
在Hammer.JS V1.0.5 中存在一个Bug
Bug现象:在Surface上使用chrome浏览器,手指点击会触发双击事件(Tap fired twice in Chrome when using touch on Windows 8.1 / )
Bug出现的原因:在此设备上手指点击时,先回触发touch事件、然后紧接着触发mouseup事件


虽然Hammer.JS在后续的版本中已经修复了此Bug ,但是对于已经集成了V1.0.5的项目,如果再升级较高版本成本较高的情况下,且仅有一个问题不能解决时,建议使用如下解决方法:


第一步:
根据出现的规律判断出,先触发的是touch事件,紧接着触发的是mouseup事件,且事件触发的时间间隙较小
    /**
     * clear the Hammer.gesture vars
     * this is called on endDetect, but can also be used when a final Hammer.gesture has been detected
     * to stop other Hammer.gestures from being fired
     */
    stopDetect: function stopDetect() {
        // clone current data to the store as the previous gesture
        // used for the double tap gesture, since this is an other gesture detect session
        var prev = this.previous;
//if 分支的意义:
//条件一:是tap事件时处理----->   prev && prev.name == 'tap' 
//条件二:touch事件时间和mouseup事件时间差较小----->   this.current.lastEvent.timeStamp - prev.lastEvent.timeStamp) < 300 
//条件三:没有位置移动----->   this.current.lastEvent.distance < 20
//条件四:事件的类型不同时----->   prev.lastEvent.pointerType != this.current.lastEvent.pointerType
        if(prev && prev.name == 'tap' &&  
(this.current.lastEvent.timeStamp - prev.lastEvent.timeStamp) < 300&&
this.current.lastEvent.distance < 20 && 
prev.lastEvent.pointerType != this.current.lastEvent.pointerType){
            this.previous = Hammer.utils.extend({}, this.previous);//忽略掉冗余的mouseup事件,取touch事件作为上一次的事件
        }else{
            this.previous = Hammer.utils.extend({}, this.current);    
        }


        // reset the current
        this.current = null;


        // stopped!
        this.stopped = true;
    },




第二步:
在处理tap事件类型时,会分为single tap 和 double tap,此Bug就出现在确定是double tap的条件中,需要补充一个条件两次tap的类型必须相同,才能代表是double tap(补充条件:prev.lastEvent.pointerType === ev.pointerType)

/**
 * Tap/DoubleTap
 * Quick touch at a place or double at the same place
 * @events  tap, doubletap
 */
Hammer.gestures.Tap = {
    name: 'tap',
    index: 100,
    defaults: {
        tap_max_touchtime : 250,
        tap_max_distance : 10,
tap_always : true,
        doubletap_distance : 20,
        doubletap_interval : 300
    },
    handler: function tapGesture(ev, inst) {
        if(ev.eventType == Hammer.EVENT_END) {
            // previous gesture, for the double tap since these are two different gesture detections
            var prev = Hammer.detection.previous,
did_doubletap = false;


            // when the touchtime is higher then the max touch time
            // or when the moving distance is too much
            if(ev.deltaTime > inst.options.tap_max_touchtime ||
                ev.distance > inst.options.tap_max_distance) {
                return;
            }


            // check if double tap
            if(prev && prev.name == 'tap' &&
                (ev.timeStamp - prev.lastEvent.timeStamp) < inst.options.doubletap_interval &&
                ev.distance < inst.options.doubletap_distance&& prev.lastEvent.pointerType === ev.pointerType) {
inst.trigger('doubletap', ev);
did_doubletap = true;
            }


// do a single tap
if(!did_doubletap || inst.options.tap_always) {
Hammer.detection.current.name = 'tap';
inst.trigger(Hammer.detection.current.name, ev);
}
        }
    }
};
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值