jstouch雙擊

Ⅰ js 判斷雙手指滑動 應該說是：在vue中如何實現 對div 雙手指的放大和縮小功能。

1. 綁定觸摸事件 touchstart touchmove

2. 監聽觸摸事件event.touches中觸摸點的數量

3. 在touchmove事件做判定，如果 event.touches.length==2 則記錄此次兩點之間的距離：Math.sqrt(Math.pow((x2-x1),2)+Math.pow((y2-y1),2))

4. 在手指移動過程中針對每一次的兩點距離進行比較。如果相對上次較大則放大，否則縮小。div的縮放通過transform:scale(x)進行控制

Ⅱ 移動端js touch 和 click 事件問題

touchend的時候，再重新 dispatchEvent 一個click事件出來，http://www.w3school.com.cn/xmldom/met_element_dispatchevent.asp

Ⅲ js touch事件和a鏈接相兼容問題

你解決這個問題了嗎？我現在碰到類似的問題了。

Ⅳ 手機端如何用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實現觸屏點擊事件

移動端觸屏滑動的效果其實就是圖片輪播，在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 事件是單擊還是雙擊的方法

方法如下：
-(void)singleTap{
NSLog(@"Tap 1 time");
}
-(void)doubleTap{
NSLog(@"Tap 2 time");

}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *touch = [touches anyObject];

NSTimeInterval delaytime = 0.4;//自己根據需要調整

switch (touch.tapCount) {
case 1:
[self performSelector:@selector(singleTap) withObject:nil afterDelay:delaytime];
break;
case 2:{
[NSObject :self selector:@selector(singleTap) object:nil];
[self performSelector:@selector(doubleTap) withObject:nil afterDelay:delaytime];

}
break;
default:
break;
}
}

Ⅶ js或者jquery怎麼實現iphone的AssistiveTouch效果

一、蘋果手機設置「屏幕小圓點」方法：
1、設置-通用-輔助功能-AssistiveTouch-打開「AssistiveTouch」。
2、更改圖標：設置-通用-輔助功能-AssistiveTouch-打開「AssistiveTouch」-自定頂層菜單-加號-選擇圖標-完成。
二、蘋果手機「屏幕小圓點」圖標功能：
1、單擊「主屏幕」圖標：代替單擊Home鍵。
2、雙擊「主屏幕」圖標：代替雙擊Home鍵，可打開多任務處理界面，向上滑動可關閉後台應用。
3、單擊「多任務」圖標：代替雙擊Home鍵，可打開多任務處理界面，向上滑動可關閉後台應用。
4、單擊「鎖定屏幕」圖標：代替按關機鍵，可鎖定屏幕。
5、長按「鎖定屏幕」圖標：代替長按關機鍵，可以彈出「滑動來關機」界面。
6、單擊「靜音」圖標：代替按靜音鍵，可設置靜音。
7、單擊「屏幕快照」圖標：代替「同時按電源鍵和Home鍵」進行截屏。
8、按「調高音量」和「調低音量」圖標：代替音量鍵。

Ⅷ 網頁使用touch.js左右滑動，手機會觸發默認手勢翻頁怎麼辦

如果你是開發者，建議你把網頁的手勢滑動區域改一下，或者把需要的滑動距離改小一點。
如果你是用戶，就把手勢翻頁關了吧。

Ⅸ js寫touch拖拽事件手指放在要拖動的物體上會迅速閃動怎麼回事

pc上的web頁面滑鼠會產生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件，但是在移動終端如iphone、ipod Touch、ipad上的web頁面觸屏時會產生回ontouchstart、ontouchmove、ontouchend、ontouchcancel事件，分答別對應了觸屏開始、拖拽及完成觸屏事件和取消。

Ⅹ js怎麼使用touchmove事件

隨著觸屏手機、平板電腦的普及和佔有更多用戶和使用時間，觸屏的觸碰、滑動等事件也成為javaScript開發不可避免的知識，現在何問起就和大家一起學習js的觸屏操作，js的觸屏touchmove事件，為手指在屏幕上滑動觸發的事件，這里製作了一個簡單的示例，可以通過這個示例認識touchmove事件。