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實現觸屏點擊事件

移動端觸屏滑動的效果其實就是圖片輪播，在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綁定事件。

❻ js touch事件

監聽事件
window.addEventListener("touchstart",function(){})

❼ 怎樣在瀏覽器上調試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中事件穿透深度剖析與多種解決方案

最近項目開發過程中，在ios環境下。雙擊（doubletap）上層元素（固定定位fix），偶爾會觸發下層（瀑布流中）路由跳轉。

經過部門老大指導，才了解到這個現象叫做「事件穿透」。再此俺決定研究下為什麼？

電腦上一般是滑鼠操作，即響應的是滑鼠事件，包括mousedown、mouseup、mousemove和click事件。

在一次點擊行為中，事件的觸發過程為：mousedown -> mouseup -> click 三步。

由於手機上沒有滑鼠，所以就用觸摸事件去實現類似的功能。touch事件包含touchstart、touchmove、touchend
注意手機上並沒有tap事件。 一些庫例如hamer.js、zepto.js 等等都是通過處理這些原生事件，來定義不同的手勢以及tap事件。

在一次點擊行為中，事件的觸發過程為：touchstart -> touchmove -> touchend。

有人在PC和手機上對事件做了對比實驗，以說明手機對touch事件相應速度快於mouse事件。touchstart --> mouseover(有的瀏覽器沒有實現) --> mousemove(一次) -->mousedown --> mouseup --> click -->touchend。
瀏覽器在 touchend 之後會等待約 300ms ，如果沒有 tap 行為，則觸發 click 事件。 而瀏覽器等待約 300ms 的原因是，判斷用戶是否是雙擊（double tap）行為，雙擊過程中就不適合觸發 click 事件了。 由此可以看出 click 事件觸發代表一輪觸摸事件的結束。

ps：此處偷一張圖

跟局官網描述我們可以看出：觸發路由跳轉的事件默認為 click

移動端chromiun 和 iOS 9.3＋ 可以用 CSS 屬性來阻止元素的雙擊縮放進而取消點擊穿透的延遲：

首先引入庫：

調用：

將層的固定定位「降」下來，和下面的router-link都在瀑布流內。
註：此方法只適合部分項目。

由於 click 事件的滯後性，在這段時間內原來點擊的元素消失了，於是便「穿透」了。因此我們順著這個思路就想到，可以給元素的消失做一個fade效果，類似jQuery里的fadeOut，並設置動畫ration大於300ms，這樣當延遲的 click 觸發時，就不會「穿透」到下方的元素了。
同樣的道理，不用延時動畫，我們還可以動態地在觸摸位置生成一個透明的元素，這樣當上層元素消失而延遲的click來到時，它點擊到的是那個透明的元素，也不會「穿透」到底下。在一定的timeout後再將生成的透明元素移除。

❾ 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可能不適應