移動端開發中的觸摸事件和鍵盤操作

標籤：

 如何關閉iOS中鍵盤自動大寫：

　　我們知道在iOS中，當虛擬鍵盤彈出時，預設情況下鍵盤是開啟首字母大寫的功能的，根據某些業務情境，可能我們需要關閉這個功能，移動版本webkit為 input元素提供了autocapitalize屬性，通過指定autocapitalize=”off”來關閉鍵盤預設首字母大寫。

iOS中如何徹底禁止使用者在新視窗開啟頁面

　　有時我們可能需要禁止使用者在新視窗開啟頁面，我們可以使用a標籤的target=”_self“來指定使用者在新視窗開啟，或者target屬性保持空，但 是你會發現iOS的使用者在這個連結的上方長按3秒鐘後，iOS會彈出一個列表按鈕，使用者通過這些按鈕仍然可以在新視窗開啟頁面，這樣的話，開發人員指定的 target屬性就失效了，但是可以通過指定當前元素的-webkit-touch-callout樣式屬性為none來禁止iOS彈出這些按鈕。這個技 巧僅適用iOS對於Android平台則無效。

如何解決盒子邊框溢出：

當你指定了一個區塊層級元素時，並且為其定義了邊框，設定了其寬度為100％。在行動裝置開發過程中我們通常會對文字框定義為寬度100％，將其定義為塊級元 素以實現全屏自適應的樣式，但此時你會發現，該元素的邊框(左右)各1個像素會溢了文檔，導致出現橫向捲軸，為解決這一問題，我們可以為其添加一個特殊 的樣式-webkit-box-sizing:border-box;用來指定該盒子的大小包括邊框的寬度。

移動端觸屏滑動的效果其實就是圖片輪播，在PC的頁面上很好實現，綁定click和mouseover等事件來完成。但是在行動裝置上，要實現這種輪播的效果，就需要用到核心的touch事件。處理touch事件能跟蹤到螢幕滑動的每根手指。
以下是四種touch事件
touchstart:     //手指放到螢幕上時觸發
touchmove:      //手指在螢幕上滑動式觸發
touchend:    //手指離開螢幕時觸發
touchcancel:     //系統取消touch事件的時候觸發，這個好像比較少用
 
每個觸摸事件被觸發後，會產生一個event對象，event對象裡額外包括以下三個觸摸列表
touches:     //當前螢幕上所有手指的列表
targetTouches:      //當前dom元素上手指的列表，盡量使用這個代替touches
changedTouches:     //涉及當前事件的手指的列表，盡量使用這個代替touches
這些列表裡的每次觸摸由touch對象組成，touch對象裡包含著觸摸資訊，主要屬性如下：
clientX / clientY:      //觸摸點相對瀏覽器視窗的位置
pageX / pageY:       //觸摸點相對於頁面的位置
screenX  /  screenY:    //觸摸點相對於螢幕的位置
identifier:        //touch對象的ID
target:       //當前的DOM元素
 
注意：
手指在滑動整個螢幕時，會影響瀏覽器的行為，比如滾動和縮放。所以在調用touch事件時，要注意禁止縮放和滾動。
1.禁止縮放
通過meta元標籤來設定。
<meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no">
2.禁止滾動
preventDefault是阻止預設行為，touch事件的預設行為就是滾動。
event.preventDefault();

box.addEventListener(‘touchmove‘, function(event) 
          { // 如果這個元素的位置內只有一個手指的話
                        if (event.targetTouches.length == 1) 
                  {
                        var touch = event.targetTouches[0];
                          // 把元素放在手指所在的位置
                          box.style.left = touch.pageX + ‘px‘;
                                 box.style.top = touch.pageY + ‘px‘;
                        }
        }, false);

移動端開發中的觸摸事件和鍵盤操作