touchjs委託

『壹』 手機端如何用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);
	}
}

『貳』 js touch事件為什麼只能滑動一次

每個觸復摸事件被觸發後，會生成制一個event對象，event對象里額外包括以下三個觸摸列表
touches: //當前屏幕上所有手指的列表
targetTouches: //當前dom元素上手指的列表，盡量使用這個代替touches
changedTouches: //涉及當前事件的手指的列表，盡量使用這個代替touches
這些列表裡的每次觸摸由touch對象組成，touch對象里包含著觸摸信息，主要屬性如下：
clientX / clientY: //觸摸點相對瀏覽器窗口的位置
pageX / pageY: //觸摸點相對於頁面的位置
screenX / screenY: //觸摸點相對於屏幕的位置
identifier: //touch對象的ID
target: //當前的DOM元素
注意：
手指在滑動整個屏幕時，會影響瀏覽器的行為，比如滾動和縮放。所以在調用touch事件時，要注意禁止縮放和滾動。

『叄』 如何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綁定事件。

『肆』 怎樣在瀏覽器上調試touch事件

為大家介紹chrome瀏覽器中常用的調試功能，對於其他的瀏覽器，大家同樣可以觸類旁通。接下來->打開chrome->按F12。開始chorome調試之旅吧！
一、JS調試

選中Script標簽之後，我們來到了JS調試界面。
為大家講解一下各個區域的作用。

左上角有一個下拉框，用於選擇JS文件，還有後退以及前進按鈕，可以快速地返回之前調試的JS文件。

左側的代碼窗口，用處自然不必多說。在行數的地方點擊滑鼠可以設置斷點。程序運行到斷點處時，可以滑鼠在代碼上懸停，以查看變數、表達式的值。

右上角的幾個小按鈕，用於控製程序的執行（當然，要設置斷點以後才有用。）功能分別為執行至下一個斷點（F8）、執行至下一個函數調用結束(F10)、執行至下一個函數內部(F11)、跳出當前函數(Shift+F11)、禁用所有斷點。

右側的第一個區域，用於觀察變數。點擊『+』添加你要觀察的變數或者表達式，這樣的話，無論程序運行到哪裡，你都能夠監視一些重要的值。

右側的第二個區域是函數的調用堆棧。在這里，我們可以看到函數的嵌套調用結構，點擊可以快速轉到函數的所在位置。

右側第三個區域，同樣是用於觀察變數的。這里分為Local和Global兩個。Local里，可以看到所有的當前作用域內的變數。而Global基本可以看到所有全局變數。

右側第四個區域，斷點管理。

按Esc鍵快速調出下面的的控制台，在這里可以看到程序的各種輸出，。包括log、警告、異常。如果我們在代碼裡面寫了
console.log(o);語句，則o會在這里作為對象被輸出，這是調試過程中比較常用的功能。該值得一提的是，在這里，我們可以直接輸入代碼，立即
執行。

其他區，大家自行探究吧，說了這么多，剩下的也就是孰能生巧啦。
二、CSS樣式調試

好吧，這回，我們不用F12。換個cool的方法。在頁面上你想調試的元素上點擊右鍵->審查元素(N)。然後，你就快速地來到CSS調試界面，並且已經幫你定位好元素。
左側是實時html結構。

右側第一個區域是所有對當前元素起作用的CSS屬性。

右側第二個區可以看到文件里相應的CSS原文。

在這里，你可以直接對實時html結構進行編輯、可以對css進行編輯。重點是，你可以馬上看到修改的效果，再也不用一遍又一遍地刷新頁面了！

『伍』 JS移動端獲取觸控位置

1、如抄圖位置是一個html中的可編輯內容的div標簽，在里邊輸入文字，會有一個游標。

『陸』 javascript中的touchstart事件，求寫法

function load(){

document.addEventListener('touchstart',fn, false);
document.addEventListener('touchmove',fn, false);
document.addEventListener('touchend',fn, false);
function fn(event){
var event = event || window.event;
var ele=獲取你要的元素;
switch(event.type){
case "touchstart":
接觸時的操作

break;
case "touchend":
連續滑動時的操作

break;
case "touchmove":
event.preventDefault();//取消事件的默認動作
離開時的操作

break;
}
}

}

window.addEventListener('load',load, false);

『柒』 zepto.js濡備綍緇戝畾touch浜嬩歡

JavaScriptzepto濡備綍娣誨姞瑙︽懜浜嬩歡渚嬪

鍙傝:http://zeptojs.com/

瑙︽帶

瑙︽懜浜嬩歡

鈥滆Е鎽糕濇ā鍧楀炲姞浜嗕互涓嬩簨浠訛紝鍙涓庡紑鍜屽叧涓璧蜂嬌鐢:

鐐瑰嚮鈥旂偣鍑誨厓緔犳椂瑙﹀彂銆

singleTap鍜宒oubleTap鈥旇繖瀵

浜嬩歡鍙鐢ㄤ簬媯嫻嬪悓涓涓婄殑鍗曞嚮鍜屽弻鍑

鍏冪礌(濡傛灉涓嶉渶瑕佸弻鍑繪嫻嬶紝璇蜂嬌鐢╰ap浠ｆ浛)銆

longTap褰撶偣鍑誨厓緔犲苟涓旀墜鎸囨寜浣忚秴榪750姣縐掓椂瑙﹀彂銆

swipe銆乻wipeLeft銆乻wipeRight銆乻wipeUp銆乻wipeDown鈥斿湪婊戝姩鍏冪礌鏃惰Е鍙(鍙閫夊湴鍦ㄧ粰瀹氭柟鍚戜笂)

鎬庝箞鍏抽棴宕藉唇娑堟伅閫氱煡錛

鏂規硶/姝ラ

1.鎵撳紑宕藉唇zepeto涓婚〉錛

2.鏉ュ埌涓浜轟富欏碉紝鐐瑰嚮鍙充笂瑙掔殑銆愯劇疆銆戙

3.鎵撳紑璁劇疆錛岀偣鍑匯愭帹閫侀氱煡銆

4.欏甸潰璺寵漿錛岀偣鍑誨叧闂銆愬唇瀛愭柊闂匯戝嵆鍙銆

宕藉唇zepeto鎬庝箞鑾峰緱澶ч噺閽葷煶錛

宕藉唇寰楀埌澶ч噺閽葷煶浠誨姟濡備笅

1.鎵撳紑宕藉唇涓婚〉,鐐瑰嚮銆愪換鍔°戙

2.鎵懼埌濂栧姳閽葷煶鐨勪換鍔,鍘誨畬鎴愪換鍔″氨濂,鐒跺悗鍐嶇偣鍑匯愬垢榪愮洅銆戙

3.鍦ㄥ垢榪愮洅鍐,鎵懼埌閽葷煶浠誨姟,鐐瑰嚮鍋氫換鍔″嵆鍙銆

宕藉唇鎬庝箞鏀瑰悕錛

宕藉唇zepeto涓,鍦ㄤ富欏甸潰鐐瑰嚮鍙充笅瑙掔殑鎸夐挳榪涘叆涓浜轟腑蹇冨悗,鐐瑰嚮澶村儚灝變細榪涘叆鎴戠殑zepeto欏甸潰,鍑虹幇淇鏀瑰撳悕鐨勯夐」,鎺ョ潃灝辮兘鑷鐢卞彉鏇村撳悕鍟︺

2021鐗堝唇宕芥庝箞鎮㈠嶅垵濮嬪寲錛

1銆佹垜浠鎵撳紑鎵嬫満涓婄殑zepeto搴旂敤榪涘叆鍚庯紝鐐瑰嚮涓嬫柟鐨勬渶鍚庝竴涓鍥炬爣榪涘叆涓浜轟腑蹇冿紝鐒跺悗鐐瑰嚮涓婃柟鐨勫ご鍍忋

2銆佺偣鍑誨ご鍍忓悗錛屼笅闈浼氬脊鍑鴻劇疆鐨勯夐」銆傛垜浠閫夋嫨欏墮儴鐨勨滄垜鐨剒epeto鈥濊繖涓閫夐」榪涘叆銆

3銆佺偣鍑昏繘鍏ュ悗錛屽湪zepeto璁劇疆鍒楄〃涓錛屾垜浠閫夋嫨欏甸潰涓鐨勨滆掕壊鍒濆嬪寲鈥濈殑閫夐」銆

4銆佺偣鍑誨悗錛岄〉闈浼氬脊鍑哄硅瘽妗嗭紝璇㈤棶鎴戜滑鏄鍚﹁侀噸寤鴻掕壊錛屾垜浠鐐瑰嚮鈥滃ソ鐨勨濄

5銆佺偣鍑誨悗錛屽垯浼氶噸鏂板洖鍒板埗浣滈〉闈錛屾垜浠鐐瑰嚮鍒朵綔zepeto鐨勫浘鏍囥

6銆佺偣鍑誨悗錛屼細鏉ュ埌鐧誨綍欏甸潰錛岃繖鏃舵垜浠鍙浠ユ崲涓涓鏂瑰紡鐧誨綍銆備笉瑕佷嬌鐢ㄥ師鏈夌殑鐧誨綍閫斿緞錛屼篃鍙浠ョ偣鍑諱笅嬈＄櫥褰曠殑閫夐」銆

7銆佺偣鍑誨悗錛岃繘鍏ュ埌鎬у埆閫夋嫨鐨勭晫闈錛屾牴鎹鑷宸辯殑鎯呭喌閫夋嫨鎬у埆銆

8銆侀夋嫨瀹岋紝鍒欏彲浠ユ潵鍒版媿鐓х晫闈錛屽氨鍙浠ュ瑰噯鑷宸遍噸鏂版媿鐓ф崗鑴搞

ZEPETO鍒烽噾甯佽緟鍔㈱EPETO鐧句竾閲戝竵鑴氭湰鏀葷暐錛

1銆佸彧瑕佺敤綰㈡墜鎸囪蔣浠訛紝鏀鎸乑EPETO鍏峳oot鍏嶈秺鐙卞府鍔╃帺瀹惰嚜鍔ㄨ翰綆卞瓙姣忔棩浠誨姟鍒烽噾甯併

2銆佺帺瀹朵笅杞藉畨瑁呭ソ綰㈡墜鎸囷紝娣誨姞涓鍙頒簯鎵嬫満錛涘湪浜戞墜鏈哄唴閮ㄧ殑搴旂敤甯傚満錛屾悳緔zepeto錛屼笅杞藉畨瑁呰繖涓搴旂敤鍜岃緟鍔┿