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锛屼笅杞藉畨瑁呰繖涓搴旂敤鍜岃緟鍔┿