mobile

touch事件

touchstart // 手指觸控到DOM元素觸發
touchmove // 手指在DOM元素滑動時觸發
touchend // 手指從DOM元素移開時觸發

TouchEvent觸控事件物件

touches // 正在觸控(螢幕)的所有手指的一個列表
targetTouches // 正在觸控當前(DOM元素)上的手指的一個列表
changedTouches // 手指狀態發生了改變的列表，從無到有，從有到無變化

// touchend事件只能拿到changedTouches 不能拿到targetTouches touches

移動端拖動元素

// 需要當前手指的座標值 targetTouches[0]裡面的pageX和pageY
// 手指移動也會觸發螢幕滾動
// touchmove內部要阻止預設的螢幕滾動e.preventDefault()

// transition過渡結束事件
element.addEventListener('transitionend',function (){ ... })

// 輪播
// 使用transform: translateX() 配合transition過渡 
// 不需要使用animate動畫函式
// 無縫滾動時 取消過渡
// 手指滑動
// 原始translateX + 手指滑動距離 取消過渡
// 通過touchend事件設定回彈

classList

// 新增類名
element.classList.add(類名)

// 移除類名
element.classList.remove(類名)

// 切換類名 有刪除 沒有新增 
element.classList.toggle(類名)

click300ms延時

// 原因移動端雙擊螢幕會縮放

// 禁止使用者縮放
<meta name="viewport" content="user-scalable=no">

// 封裝touch事件
// 手指觸控離開時間間隙小於150ms且沒有滑動過螢幕 則定義為點選
tap(element, function () { // 執行程式碼 })
     function tap(element, callback) {
        var isMove = false
        var startTime = 0
        element.addEventListener('touchstart', function () {
                startTime = Date.now()
        })
    element.addEventListener('touchmove', function () {
        isMove = true
    })
    element.addEventListener('touchend', function () {
        if (!isMove && (Date.now - startTime) < 150) {
            callback && callback()
        }
        isMove = false
        startTime = 0
    })
}
        
 // fastclick外掛
 <script src="fastclick.js"></script>
 
<script>
  if ('addEventListener' in document) {
      document.addEventListener('DOMContentLoaded', function () {
         FastClick.attach(document.body);
      }, false);
  }
</script>       

// zyMedia多媒體外掛
<div class="zy_media">
    <video poster="test.jpg" data-config='{"mediaTitle": "《瘋狂動物城》--騰訊視訊"}'>
        <source src="test.mp4" type="video/mp4">
        您的瀏覽器不支援HTML5視訊
    </video>
</div>

zymedia('video');

附件