自己写了个简单的自定义事件js,目前发现下面问题
问题:google nexus5 浏览器touchend事件不会触发
点击屏幕触发touchstart,滑动触发touchmove,手指离开屏幕此时不会触发touchend。
多次测试后发现:只要有发生touchmove,就不会触发之后的touchend。
求教各位大大帮忙指教
谢谢
CustomEvtArgu={MaxSwipeDuration:1000,MaxClickDuration:500,MinHorizontalDistance:80,MinVerticalDistance:100 }
CustomTouchElem = new Array();
var jeffobject = {
bindCustomEvt:function($object,evtType,event){
var customTouchEvt=function($elem){
var touchMovePosArr = new Array();
var _swipe = {start:{active:false,key:'start'},tap:{active:false,key:'tap'},lclick:{active:false,key:'lclick'},
swipeleft:{active:false,key:'swipeleft'},swiperight:{active:false,key:'swiperight'},
swipetop:{active:false,key:'swipetop'},swipebottom:{active:false,key:'swipebottom'}};
$elem.bind('touchstart',function(e){
touchMovePosArr.length = 0;
_swipe = {start:{active:true,key:'start'},tap:{active:false,key:'tap'},lclick:{active:false,key:'lclick'},
swipeleft:{active:false,key:'swipeleft'},swiperight:{active:false,key:'swiperight'},
swipetop:{active:false,key:'swipetop'},swipebottom:{active:false,key:'swipebottom'}};
addTouchMovePos(e.originalEvent, touchMovePosArr);
typeof event!=='function'&&event.startEvt&&event.startEvt.call(this);
return true;
}).bind('touchmove', function(e){
if(!_swipe.start.active){
return false;
}
addTouchMovePos(e.originalEvent, touchMovePosArr);
return true;
}).bind('touchend',function(e){
var _evts=new Array();
if(!_swipe.start.active){
return false;
}
addTouchMovePos(e.originalEvent, touchMovePosArr);
if(touchMovePosArr.length>=3 && Math.abs(e.originalEvent.timeStamp-touchMovePosArr[0].timeStamp)<=CustomEvtArgu.MaxSwipeDuration){
var endtouch = e.originalEvent.changedTouches[0];
var changedX = endtouch.clientX - touchMovePosArr[0].x;
var changedY = endtouch.clientY - touchMovePosArr[0].y;
var notMoveX = changedX < CustomEvtArgu.MinHorizontalDistance && changedX > -CustomEvtArgu.MinHorizontalDistance;
var notMoveY = changedY < CustomEvtArgu.MinVerticalDistance && changedY > -CustomEvtArgu.MinVerticalDistance;
_swipe.swipeleft.active = changedX <= -CustomEvtArgu.MinHorizontalDistance/* && notMoveY */;
_swipe.swiperight.active = changedX >= CustomEvtArgu.MinHorizontalDistance/* && notMoveY */;
_swipe.swipetop.active = changedY <= -CustomEvtArgu.MinVerticalDistance/* && notMoveX */;
_swipe.swipebottom.active = changedY >= CustomEvtArgu.MinVerticalDistance/* && notMoveX */;
_swipe.swipeleft.active && _evts.push(_swipe.swipeleft);
_swipe.swiperight.active && _evts.push(_swipe.swiperight);
_swipe.swipetop.active && _evts.push(_swipe.swipetop);
_swipe.swipebottom.active && _evts.push(_swipe.swipebottom);
}
if(touchMovePosArr.length<3){
if((e.originalEvent.timeStamp-touchMovePosArr[0].timeStamp) >= CustomEvtArgu.MaxClickDuration){
_swipe.lclick.active=true;
_evts.push(_swipe.lclick);
}
else{
_swipe.tap.active=true;
_evts.push(_swipe.tap);
}
}
_swipe.start.active = false;
touchMovePosArr.length = 0;
var _this = this;
$.each(_evts,function(idx,val){
// $(_this).trigger(this.key);
var originalType = e.type;
e.type = this.key;
$.event.dispatch.call(_this,e);
CustomEvtArgu.timeStamp=e.timeStamp
e.type = originalType;
});
typeof event!=='function'&&event.endEvt&&event.endEvt.call(this);
return true;
});
},
addTouchMovePos=function(event, touchMovePosArr){
touchMovePosArr.push({x:event.changedTouches[0].clientX,y:event.changedTouches[0].clientY,timeStamp:event.timeStamp});
};
if($.inArray($object, CustomTouchElem) == -1){
CustomTouchElem.push($object);
customTouchEvt($object);
}
$object.bind(evtType,typeof event==='function'?event:event.mainEvt);
}
}
$.fn.jeff=$.extend(true,$.fn.jeff,jeffobject);
Android