月度归档：2016年11月

悠哉博主的日常

[Javascript]触摸拖动事件

留下评论 
(function(){
var extendEventDefaultOpt={
	touchdrag:{
		preventDefault:true,//阻止触摸移动的默认行为
		allowMultiTouch:false//允许在多点触控时也触发这个事件
	}
}
window.extendEvent={//扩展事件
	touchdrag:function(element,opt){
		var stats={},opt=Object.assign({},extendEventDefaultOpt.touchdrag,opt);
		element.addEventListener('touchstart',function(e){
			if(!opt.allowMultiTouch && e.changedTouches.length>1){stats={};return;}
			var ct=e.changedTouches;
			for(var t=ct.length;t--;){
				stats[ct[t].identifier]={x:ct[t].clientX,y:ct[t].clientY};
			}
		});
		element.addEventListener('touchmove',function(e){
			if(!opt.allowMultiTouch && e.touches.length>1){stats={};return;}
			var ct=e.changedTouches;
			for(var t=ct.length;t--;){
				var id=ct[t].identifier;
				if(!id in stats)continue;//不属于这个元素的事件
				var event=new TouchEvent('touchdrag',e);
				event.deltaX=ct[t].clientX-stats[id].x;
				event.deltaY=ct[t].clientY-stats[id].y;
				stats[id].x=ct[t].clientX;
				stats[id].y=ct[t].clientY;
				element.dispatchEvent(event);
			}
			if(opt.preventDefault)e.preventDefault();
		});
		element.addEventListener('touchend',function(e){
			var ct=e.changedTouches;
			for(var t=ct.length;t--;){
				var id=ct[t].identifier;
				if(id in stats)delete stats[id];
			}
		});
	}
}
})();

这是我做的一个自定事件，在其Event对象上会带有deltaX和deltaY两个属性以表示触摸拖动的偏移量。

用法是

extendEvent.touchdrag(元素,选项Object) //在元素上启用这个自定义事件

选项object的属性见上面源码里`extendEventDefaultOpt` 对象的两个属性。
然后当手指在元素上拖动的时候就会触发touchdrag事件。
继续阅读[Javascript]触摸拖动事件 →

佳佳教程

[Javascript]判断是否为触摸操作模式

留下评论

写了段代码可以用来识别用户的操作方式是否为触摸。

首先需要给元素加一个便于批量添加事件的on方法（我自认为这么写没什么毛病

(function(){
	function Extent_On_Event(){
		if(arguments[0] instanceof Array){
			var arg=arguments,es=arguments[0];
			es.forEach(function(e){
				arg[0]=e;
				this.addEventListener.apply(this,arg);
			});
		}else{
			this.addEventListener.apply(this,arguments);
		}
		return this;
	};
	(window.EventTarget||window.Node).prototype.on=Extent_On_Event;
	if(!window.on)Window.prototype.on=Extent_On_Event;
})();

然后定义判断触摸模式的代码

//touchMode
(function(){
	var isTouchMode=window.touchMode=('ontouchstart' in window);
	var mouseEventRec=0;
	function touchModeEvent(node){
		node.on(['touchstart','touchend','touchmove'],function(){
			mouseEventRec&&(mouseEventRec=0);
			if(isTouchMode)return;
			isTouchMode=window.touchMode=true;
			var e=new Event('touchModeChange');
			e.touchMode=isTouchMode;
			window.dispatchEvent(e);
		});
		node.on('mousemove',function(){
			if(!isTouchMode)return;
			mouseEventRec++;
			if(mouseEventRec>4){
				isTouchMode=window.touchMode=false;
				var e=new Event('touchModeChange');
				e.touchMode=isTouchMode;
				window.dispatchEvent(e);
			};
		});
	}
	touchModeEvent(window);
})();

这段代码的作用

  • 在`window` 对象上定义touchMode变量，值为boolean，为true时是触摸模式，为false时是非触摸模式（大概就是鼠标模式）。如果你不希望出现此变量，删除相关赋值代码即可。
  • 模式变动时在`window` 对象上触发`touchModeChange` 事件，event对象的touchMode属性为变动后的值。

在支持触摸的设备上，touchMode默认为true，移动鼠标后会转变为false。我认为这个地方是有点毛病的，但是不知道如何正确判断初始状态。

对于阻止以上代码中事件冒泡到window的元素，需要额外执行相关的监听代码以保证正确性。