国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

調(diào)試手記：zepto touch 模塊與移動(dòng)瀏覽器 media 標(biāo)簽的不兼容，以及解決方法

Darkgel / 1640人閱讀

摘要：調(diào)試結(jié)果看了一下錯(cuò)誤提示，發(fā)現(xiàn)手機(jī)瀏覽器只允許用戶操作打開，換句話說不管你最終是哪個(gè)函數(shù)執(zhí)行了，你的調(diào)用棧上溯到最開始一定是一個(gè)元素的事件回調(diào)。

問題描述

最近在開發(fā)一個(gè)視頻播放器項(xiàng)目，需要隱藏 video 標(biāo)簽，使用 canvas 自己做渲染。結(jié)果在點(diǎn)按鈕播放視頻的時(shí)候發(fā)現(xiàn) zepto touch 模塊不能用了。

調(diào)試結(jié)果

看了一下錯(cuò)誤提示，發(fā)現(xiàn)手機(jī)瀏覽器只允許用戶操作打開 video，換句話說不管你最終是哪個(gè)函數(shù)執(zhí)行了 video.play()，你的調(diào)用棧上溯到最開始一定是一個(gè) DOM 元素的 UI 事件回調(diào)。

但是zepto touch 模塊是這么封裝 tap 事件的：

    tapTimeout = setTimeout(function() {

      // trigger universal "tap" with the option to cancelTouch()
      // (cancelTouch cancels processing of single vs double taps for faster "tap" response)
      var event = $.Event("tap")
      event.cancelTouch = cancelAll
      // [by paper] fix -> "TypeError: "undefined" is not an object (evaluating "touch.el.trigger"), when double tap
      if (touch.el) touch.el.trigger(event)

      // trigger double tap immediately
      if (touch.isDoubleTap) {
        if (touch.el) touch.el.trigger("doubleTap")
        touch = {}
      }

      // trigger single tap after 250ms of inactivity
      else {
        touchTimeout = setTimeout(function(){
          touchTimeout = null
          if (touch.el) touch.el.trigger("singleTap")
          touch = {}
        }, 250)
      }
    }, 0)

使用 setTimeout 異步執(zhí)行函數(shù)，導(dǎo)致調(diào)用棧被清空了，系統(tǒng)判斷的時(shí)候自然不會認(rèn)為是用戶操作導(dǎo)致的 video.play()。

修改方案

那么比較粗暴的解決方法就是修改 zepto 代碼，把 tap 事件的激發(fā)動(dòng)作從異步回調(diào)中移出來同步執(zhí)行，具體的說就是這三行：

      var event = $.Event("tap")
      event.cancelTouch = cancelAll
      if (touch.el) touch.el.trigger(event)

因?yàn)?tap 事件是沒有什么延時(shí)的，所以直接移出來不會有什么影響，如果是延時(shí)事件就很尷尬了，暫時(shí)還想不出來什么解決方法。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/80522.html

相關(guān)文章

  • 第六天 移動(dòng)端Web開發(fā)注意事項(xiàng)

    摘要：隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，移動(dòng)已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口，隨之而來的是前端在移動(dòng)開發(fā)上面臨的各種機(jī)遇與挑戰(zhàn)，本文就一些常見移動(dòng)端問題對移動(dòng)開發(fā)需要注意的事項(xiàng)進(jìn)行一下總結(jié)，必然不可能涉及方方面面，但會隨著筆者的積累持續(xù)更新。 隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，移動(dòng)Web已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口，隨之而來的是前端在移動(dòng)Web開發(fā)上面臨的各種機(jī)遇與挑戰(zhàn)，本文就一些常見移動(dòng)端問題對移動(dòng)Web開發(fā)需要注意...

    妤鋒シ 評論0 收藏0

  • 第六天 移動(dòng)端Web開發(fā)注意事項(xiàng)

    摘要：隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，移動(dòng)已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口，隨之而來的是前端在移動(dòng)開發(fā)上面臨的各種機(jī)遇與挑戰(zhàn)，本文就一些常見移動(dòng)端問題對移動(dòng)開發(fā)需要注意的事項(xiàng)進(jìn)行一下總結(jié)，必然不可能涉及方方面面，但會隨著筆者的積累持續(xù)更新。 隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，移動(dòng)Web已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口，隨之而來的是前端在移動(dòng)Web開發(fā)上面臨的各種機(jī)遇與挑戰(zhàn)，本文就一些常見移動(dòng)端問題對移動(dòng)Web開發(fā)需要注意...

    xbynet 評論0 收藏0

  • 移動(dòng)前端知識總結(jié)

    摘要：基礎(chǔ)知識頁面窗口自動(dòng)調(diào)整到設(shè)備寬度，并禁止用戶縮放頁面忽略將頁面中的數(shù)字識別為電話號碼忽略平臺中對郵箱地址的識別當(dāng)網(wǎng)站添加到主屏幕快速啟動(dòng)方式，可隱藏地址欄，僅針對的版本以后，上已看不到效果將網(wǎng)站添加到主屏幕快 meta基礎(chǔ)知識H5頁面窗口自動(dòng)調(diào)整到設(shè)備寬度，并禁止用戶縮放頁面 忽略將頁面中的數(shù)字識別為電話號碼 忽略Android平臺中對郵箱地址的識別 當(dāng)網(wǎng)站添加到主屏幕快...

    gotham 評論0 收藏0

  • 移動(dòng)前端知識總結(jié)

    摘要：基礎(chǔ)知識頁面窗口自動(dòng)調(diào)整到設(shè)備寬度，并禁止用戶縮放頁面忽略將頁面中的數(shù)字識別為電話號碼忽略平臺中對郵箱地址的識別當(dāng)網(wǎng)站添加到主屏幕快速啟動(dòng)方式，可隱藏地址欄，僅針對的版本以后，上已看不到效果將網(wǎng)站添加到主屏幕快 meta基礎(chǔ)知識H5頁面窗口自動(dòng)調(diào)整到設(shè)備寬度，并禁止用戶縮放頁面 忽略將頁面中的數(shù)字識別為電話號碼 忽略Android平臺中對郵箱地址的識別 當(dāng)網(wǎng)站添加到主屏幕快...

    MartinDai 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<