mobile_基礎事件

DOM0 級事件模型（模擬器不支持）

DOM0 級事件綁定 在 移動端有 300ms 的延遲

ontouchstart

手指按下事件

 

ontouchmove

手指移動事件

 

pntouchend

手指離開事件

 

DOM2 級事件模型（項目）

• 手指按下事件

ele.addEventListener("touchstart", func1, false);

 

• 手指移動事件

ele.addEventListener("touchmove", func2, false);

• TouchEvent

手指列表：（都是 僞數組）

• changedTouches        目標元素 目標事件 上的手指列表0
  • e.changedTouches[0].clientX;
  • e.changedTouches[0].clientY;
• targetTouches         目標元素上的手指列表
• touches        屏幕上的手指列表

 

• 手指離開事件

ele.addEventListener("touchend", func3, false);

 

禁止瀏覽器默認行爲（長按複製文本）

// 手機上你滑動的時候他自己就有個默認的滾屏

// 所以若是你要操做操做你個dom元素，用touchmove事件，這其實也是滑動

// 本來你的效果是要在dom上滑動而後產生相應的效果，這個時候你確定不但願手機上的瀏覽器屏幕滾動

// 因此你應該把它默認的滾動給禁止了。這樣纔會有好的用戶體驗

document.addEventListener("touchstart", function(e){

e.preventDefault();        /* DOM2 清除默認行爲 */

}, false);

 

準備工做

1. meta 標籤（蘋果發明的，PC 瀏覽器不支持）

<meta name="viewport" content="width=device-width",initial-scale=1.0, user-scalable=no />        完美視口

若是 頁面存在一個太大的元素，只用了 width=device-width    initial-scale=1.0 的一個，一些瀏覽器會擴展布局視口的寬度來容納此元素

若是 width=device-width    initial-scale=1.0 都寫了，則大部分的瀏覽器不會改變佈局視口

initial-scale    是系統初始縮放比例，隨着 視覺視口 改變而改變。參照理想視口 375

user-scalable    是否容許用戶進行縮放        默認容許

minimum-scale    容許縮放的最小比例        看公司規定    大多數 1

maximumscale    運算縮放的最大比例        看公司規定    大多數  1

target-desitydpi        基本不用，由於 webkit 內核不支持了

2. 清除默認樣式

3. 清除系統滾動條

4. 取消默認行爲

5. 適配

6. 點透處理