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標簽，在里邊輸入文字，會有一個游標。