问题背景:
使用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);
}
}
}
};
使用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);
}
}
}
};
更多推荐
Hammer.js v1.0.5 在Surface上使用Chrome时,手指点击时放大
发布评论