指尖下的js ——多觸式web前端開發之一：對於Touch的處理

時間 2020-05-28

標籤指尖 web 前端開發之一對於 touch 處理欄目 JavaScript 简体版

原文原文鏈接

小碼哥近來忽然想到當初的一個面試題，就是讓我描述相似刮刮樂那樣刮卡的效果。當時瞬間我就迷茫了，只記得本身當初的回答，不着邊際，生硬的要死。也就沒有後文了，，，，，
javascript

所以，小碼哥去找度娘了，度娘給我新的啓發，感受本身的思惟始終是圍繞着本身的知識量的多少轉動的。我對此也是自醉了......css

下面是在度娘搜索中看到的一片文章，講的比較通俗易懂。所以就引用過來了，以備未來自用。嘎嘎html

水果公司的那些small and cute的設備給咱們提供了史無前例的用戶體驗。當用戶在iphone和ipad上運指如飛
的時候，那些使用objective-c寫出優秀應用的開發人員們內心必定充滿了成就感，由於正是他們（而不是水果
）讓iOS的世界變的豐富多彩。然而對於咱們這些以web爲本身事業核心的程序員來講，這種讓人慾罷不能的多
觸式體驗彷佛跟咱們關係不大，由於瀏覽器那一小塊地方就是咱們和用戶的所有交集了。而許多網站爲了讓iOS
的用戶可以在多觸式體驗下使用本身的服務，都專門花錢開發objective-c的本地程序做爲本身web service的客
戶端。 java

其實，對於一個web程序員或者一個網站來講，若是你的需求僅僅是讓iPhone/iPad用戶可以正常使用你的
服務，那現有的html4頁面徹底可以知足（也許須要一點點重構，可是很容易）；若是再往上一點，你須要讓你
的web客戶端看起來像是用objective-c實現的同樣，也並不是不可能，只須要將咱們熟悉的javascript搬到iOS設
備上來就行。
本文從一個多觸式網頁開發初學者的角度，首先簡單介紹一下iOS上的瀏覽器（這裏主要指Safari）所支持的
多觸式事件模型，而後將觸控（Touch）這種簡單的動做升級爲手勢（Gestrue），最後將javascript + html +
css構建的應用脫離瀏覽器，放到iOS設備的屏幕上成爲一個本地link並和植物大戰殭屍放到一塊兒。
iOS上的Safari也支持click 和mouseover等傳統的交互事件，只是不推薦在iOS的瀏覽器應用上使用click和
mouseover，由於這兩個事件是爲了支持鼠標點擊而設計出來的。Click事件在iOS上會有半秒左右的延遲，原
因是iOS要highlight接收到click的element。而mouseover/out等事件則會被手指的點擊觸發。因此，在iOS上
，應當拋棄傳統的交互事件模型而接受一個新的事件模型。Touch事件和更高級的Gesture事件，能讓你的網頁
交互起來像native應用同樣。
處理Touch事件能讓你跟蹤用戶的每一根手指的位置。你能夠綁定如下四種Touch事件：android

touchstart: // 手指放到屏幕上的時候觸發程序員

 
  touchmove:   
  // 手指在屏幕上移動的時候觸發

 
  touchend:   
  // 手指從屏幕上拿起的時候觸發

 
  touchcancel:   
  // 系統取消touch事件的時候觸發。至於系統何時會取消，不詳。。

Gesture事件則是對touch事件的更高級的封裝，主要處理手指slide、rotate、scale等動做，將在下一篇文章
詳述。
在開始描述touch事件以前，須要先描述一下多觸式系統中特有的touch對象（android和iOS乃至nokia最新
的meego系統都模擬了相似的對象，這裏只針對iOS，由於我只有iPad可用於測試。。）。這個對象封裝一次
屏幕觸摸，通常來自於手指。它在touch事件觸發的時候產生，能夠經過touch event handler的event對象取到
（通常是經過event.changedTouches屬性）。這個對象包括一些重要的屬性： web

 
  client / clientY： 
  // 觸摸點相對於瀏覽器窗口viewport的位置

 
  pageX / pageY： 
  // 觸摸點相對於頁面的位置

 
  screenX /screenY： 
  // 觸摸點相對於屏幕的位置

 
  identifier：  
  // touch對象的unique ID

CSS代碼：面試

 
  .spirit {               
  /* 方塊的class名稱*/

 
  position 
  :  
  absolute 
  ;

 
  width 
  :  
  50px 
  ;

 
  height 
  :  
  50px 
  ;

 
  background-color 
  :  
  red 
  ;

}

而後，在body下定義一個接收事件的容器，這裏body的height必須是100%才能佔滿整個viewport： objective-c

Html：編程

 
  < 
  body  
  style=」height: 100%;margin:0;padding:0」> 
 

 
  < 
  div  
  id=」canvas」  style=」position: relative;width:100%;height: 100%;」></ 
  div 
  > 
 

 
  </ 
  body 
  > 
 

定義touchstart的事件處理函數，並綁定事件：

Javascript代碼：

 
  // define global variable 
 

 
  var  
  canvas = document.getElementById(「canvas」),

 
  spirit, startX, startY;

 
  // touch start listener

 
  function  
  touchStart(event) {

 
  event.preventDefault();

 
  if  
  (spirit ||! event.touches.length)  
  return 
  ;

 
  var  
  touch = event.touches[0];

 
  startX = touch.pageX;

 
  startY = touch.pageY;

 
  spirit = document.createElement(「div」);

 
  spirit.className = 「spirit」;

 
  spirit.style.left = startX;

 
  spirit.style.top = startY;

 
  canvas.appendChild(spirit);

}

 
  // add touch start listener 
 

 
  canvas.addEventListener(「touchstart」, touchStart,  
  false 
  ); 
 

首先，咱們將方塊spirit做爲一個全局對象，由於咱們如今要測試單根手指因此屏幕上最好只有一個物體在移動

（等會有多觸實例）。在touchStart這個事件處理函數中，咱們也首先判斷了是否已經產生了spirit，也就是是
否已經有一個手指放到屏幕上，若是是，直接返回。
和傳統的event listener同樣，多觸式系統也會產生一個event對象，只不過這個對象要多出一些屬性，好比
這裏的event.touches，這個數組對象得到屏幕上全部的touch。注意這裏的event.preventDefault()，在傳統的
事件處理函數中，這個方法阻止事件的默認動做，觸摸事件的默認動做是滾屏，咱們不想屏幕動來動去的，所
以先調用一下這個函數。咱們取第一個touch，將其pageX/Y做爲spirit建立時的初始位置。接下來，咱們建立
一個div，而且設置className，left，top三個屬性。最後，咱們把spirit對象appendChild到容器中。這樣，
當第一根手指放下的時候，一個紅色的，50px見方的方塊就放到屏幕上了。
而後，咱們要開始處理手指在屏幕上移動的事件：

Javascript代碼：

 
  function  
  touchMove(event) {

 
  event.preventDefault();

 
  if  
  (!spirit || !event.touches.length)  
  return 
  ;

 
  var  
  touch = event.touches[0],

 
  x = touch.pageX – startX,

 
  y = touch.pageY – startY;

 
            
  spirit.style.webkitTransform =  
  'translate('  
  + x +  
  'px, '  
  + y +  
  'px)' 
  ;      
 

}

 
  Canvas.addEventListener(「touchmove」, touchMove,  
  false 
  ); 
 

在touch move listener中，咱們使用webkit特有的css屬性：webkitTransform來移動方塊，這個屬性具體怎麼用請google之。建議構造面向iOS設備的網頁的時候儘可能使用webkit本身的特性，不但炫，更能夠直接利用硬件來提升性能。

最後，咱們處理touchend事件。手指提起的時候方塊從屏幕上移除。

 
  function  
  touchEnd(event) {

 
  If (!spirit)  
  return 
  ;

 
  canvas.removeChild(spirit);

 
  spirit =  
  null 
  ;

}

 
  canvas.addEventListener(「touchend」, touchEnd,  
  false 
  ); 
 

在你的ipad或者iphone上測試一下以上代碼。若是不出意外的話，一個完整的多觸式web程序就誕生了。。
這種事件處理模式雖然可以知足咱們開發多觸式網頁應用的需求，可是start – move – end的流程有點繁瑣，
能不能封裝一些經常使用的動做讓咱們用一個event handler就能解決問題呢。沒錯，Gesture事件就是爲了這個目
的設計出來的，它封裝了手指的scale, slide, rotate等經常使用的動做。不過，下一章咱們再來討論這個問題。。
附件是一個更加複雜一些的例子，每根手指放下的時候都會產生一個不一樣顏色的方塊，手指動的時候方塊跟着
動，手指提起的時候方塊消失，請下載查看試用。
經過附件所包含的實例，咱們能夠看出一些較爲隱蔽的特性。首先，這裏咱們沒有再使用event.touches取全部
touch的對象，而是使用event.changedTouches這個數組，用來取得全部跟本次事件相關的touch。可是，這
裏我發現一個奇怪的特性，不知道是個人ipad有問題仍是原本就是這樣，就是在有多根手指放在屏幕上的時候
，若是提起一根手指，touchend事件的changedTouches中會包含全部手指的touch對象，而後，其餘幾根留
在屏幕上的手指會從新觸發touchstart，並刷新全部的touch對象（identifier都不同了）。若是這是一個全部
設備都有的特性，那麼將給編程者帶來一些不便，不知道水果爲啥要這麼處理。