js监听触屏事件

A. js怎么使用touchmove事件

随着触屏手机、平板电脑的普及和占有更多用户和使用时间，触屏的触碰、滑动等事件也成为javaScript开发不可避免的知识，现在何问起就和大家一起学习js的触屏操作，js的触屏touchmove事件，为手指在屏幕上滑动触发的事件，这里制作了一个简单的示例，可以通过这个示例认识touchmove事件。

B. js怎么使用touchmove事件

需要手动去注册，或者用第三方插件。

vardiv=document.getElementById('div');
div.addEventListener('touchstart',function(e){
	//touchstart:触摸开始的一瞬间，这里的e包含的触摸一瞬间所触摸的元素的信息
});
div.addEventListener('touchmove',function(e){
	//touchmove:触摸进行时，这里的e包含的触摸的元素信息
});
div.addEventListener('touchend',function(e){
	//touchend:触摸结束的一瞬间，这里的e没有多大的作用
});

这touch事件需要移动端的支持，pc可能不适应

C. 全屏自适应html5手机触屏可以关闭广告位带缓存记忆js代码，谁帮忙修改刷新一次显示一次

请把问题描述清楚

D. 手机端如何用JS实现触屏

//html5新增touch事件
//禁用手机默认的触屏滚动行为
document.addEventListener('touchmove',function(event){
	event.preventDefault();
},false);
//touchstart事件
functiontouchSatrtFunc(evt){
	try{
		//evt.preventDefault();//阻止触摸时浏览器的缩放、滚动条滚动等

		vartouch=evt.touches[0];//获取第一个触点
		varx=Number(touch.pageX);//页面触点X坐标
		vary=Number(touch.pageY);//页面触点Y坐标
		//记录触点初始位置
		startX=x;
		startY=y;


	}catch(e){
		alert('touchSatrtFunc：'+e.message);
	}
}

//touchmove事件，这个事件无法获取坐标
functiontouchMoveFunc(evt){
	try{
		//evt.preventDefault();//阻止触摸时浏览器的缩放、滚动条滚动等
		vartouch=evt.touches[0];//获取第一个触点
		varx=Number(touch.pageX);//页面触点X坐标
		vary=Number(touch.pageY);//页面触点Y坐标


//document.getElementById("version").innerHTML="原:"+startY+""+"现:"+y;
		//判断滑动方向
		
		if(y-startY>100){
			swipeDown();
		}elseif(y-startY<-100){
			swipeUp();
		}
	}catch(e){
		alert('touchMoveFunc：'+e.message);
	}
}

//touchend事件
functiontouchEndFunc(evt){
	try{
		//evt.preventDefault();//阻止触摸时浏览器的缩放、滚动条滚动等


	}catch(e){
		alert('touchEndFunc：'+e.message);
	}
}

//绑定事件
functionbindEvent(){
	document.addEventListener('touchstart',touchSatrtFunc,false);
	document.addEventListener('touchmove',touchMoveFunc,false);
	document.addEventListener('touchend',touchEndFunc,false);
}

//判断是否支持触摸事件
functionisTouchDevice(){
	//document.getElementById("version").innerHTML=navigator.appVersion;

	try{
		document.createEvent("TouchEvent");
		//alert("支持TouchEvent事件！");

		bindEvent();//绑定事件
	}catch(e){
		alert("不支持TouchEvent事件！"+e.message);
	}
}

E. 如何js实现触屏点击事件

移动端触屏滑动的效果其实就是图片轮播，在PC的页面上很好实现，绑定click和mouseover等事件来完成。但是在移动设备上，要实现这种轮播的效果，就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。

以下是四种touch事件

touchstart://手指放到屏幕上时触发
touchmove://手指在屏幕上滑动式触发
touchend://手指离开屏幕时触发
touchcancel://系统取消touch事件的时候触发，这个好像比较少用

每个触摸事件被触发后，会生成一个event对象，event对象里额外包括以下三个触摸列表

ouches://当前屏幕上所有手指的列表targetTouches://当前dom元素上手指的列表，尽量使用这个代替touches
changedTouches://涉及当前事件的手指的列表，尽量使用这个代替touches
这些列表里的每次触摸由touch对象组成，touch对象里包含着触摸信息，主要属性如下：
clientX/clientY://触摸点相对浏览器窗口的位置
pageX/pageY://触摸点相对于页面的位置
screenX/screenY://触摸点相对于屏幕的位置
identifier://touch对象的ID
target://当前的DOM元素

注意：

手指在滑动整个屏幕时，会影响浏览器的行为，比如滚动和缩放。所以在调用touch事件时，要注意禁止缩放和滚动。

1.禁止缩放

通过meta元标签来设置。

<metaname="viewport"content="target-densitydpi=320,width=640,user-scalable=no">

2.禁止滚动

preventDefault是阻止默认行为，touch事件的默认行为就是滚动。

event.preventDefault();

案例：

下面给出一个案例，需在移动设备上才能看出效果。

1.定义touchstart的事件处理函数，并绑定事件：

if(!!self.touch)self.slider.addEventListener('touchstart',self.events,false);

//定义touchstart的事件处理函数

start:function(event){
vartouch=event.targetTouches[0];//touches数组对象获得屏幕上所有的touch，取第一个touch
startPos={x:touch.pageX,y:touch.pageY,time:+newDate};//取第一个touch的坐标值
isScrolling=0;//这个参数判断是垂直滚动还是水平滚动
this.slider.addEventListener('touchmove',this,false);
this.slider.addEventListener('touchend',this,false);
},

触发touchstart事件后，会产生一个event对象，event对象里包括触摸列表，获得屏幕上的第一个touch,并记下其pageX,pageY的坐标。定义一个变量标记滚动的方向。此时绑定touchmove,touchend事件。

2.定义手指在屏幕上移动的事件，定义touchmove函数。

//移动

move:function(event){
//当屏幕有多个touch或者页面被缩放过，就不执行move操作
if(event.targetTouches.length>1||event.scale&&event.scale!==1)return;
vartouch=event.targetTouches[0];
endPos={x:touch.pageX-startPos.x,y:touch.pageY-startPos.y};
isScrolling=Math.abs(endPos.x)<Math.abs(endPos.y)?1:0;//isScrolling为1时，表示纵向滑动，0为横向滑动
if(isScrolling===0){
event.preventDefault();//阻止触摸事件的默认行为，即阻止滚屏
this.slider.className='cnt';
this.slider.style.left=-this.index*600+endPos.x+'px';
}
},

同样首先阻止页面的滚屏行为，touchmove触发后，会生成一个event对象，在event对象中获取touches触屏列表，取得第一个touch,并记下pageX,pageY的坐标，算出差值，得出手指滑动的偏移量，使当前DOM元素滑动。

3.定义手指从屏幕上拿起的事件，定义touchend函数。

//滑动释放

end:function(event){
varration=+newDate-startPos.time;//滑动的持续时间
if(isScrolling===0){//当为水平滚动时
this.icon[this.index].className='';
if(Number(ration)>10){
//判断是左移还是右移，当偏移量大于10时执行
if(endPos.x>10){
if(this.index!==0)this.index-=1;
}elseif(endPos.x<-10){
if(this.index!==this.icon.length-1)this.index+=1;
}
}
this.icon[this.index].className='curr';
this.slider.className='cntf-anim';
this.slider.style.left=-this.index*600+'px';
}
//解绑事件
this.slider.removeEventListener('touchmove',this,false);
this.slider.removeEventListener('touchend',this,false);
},

手指离开屏幕后，所执行的函数。这里先判断手指停留屏幕上的时间，如果时间太短，则不执行该函数。再判断手指是左滑动还是右滑动，分别执行不同的操作。最后很重要的一点是移除touchmove,touchend绑定事件。

F. JS移动端获取触控位置

1、如抄图位置是一个html中的可编辑内容的div标签，在里边输入文字，会有一个光标。