google nexus5 浏览器事件触发问题

-卒- 发布于 2014/06/24 16:28
阅读 230
收藏 1

自己写了个简单的自定义事件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);



加载中
返回顶部
顶部