資訊專欄INFORMATION COLUMN
摘要：調試結果看了一下錯誤提示，發現手機瀏覽器只允許用戶操作打開，換句話說不管你最終是哪個函數執行了，你的調用棧上溯到最開始一定是一個元素的事件回調。
問題描述
最近在開發一個視頻播放器項目，需要隱藏 video 標簽，使用 canvas 自己做渲染。結果在點按鈕播放視頻的時候發現 zepto touch 模塊不能用了。
調試結果看了一下錯誤提示，發現手機瀏覽器只允許用戶操作打開 video，換句話說不管你最終是哪個函數執行了 video.play()，你的調用棧上溯到最開始一定是一個 DOM 元素的 UI 事件回調。
但是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 異步執行函數，導致調用棧被清空了，系統判斷的時候自然不會認為是用戶操作導致的 video.play()。
修改方案那么比較粗暴的解決方法就是修改 zepto 代碼，把 tap 事件的激發動作從異步回調中移出來同步執行，具體的說就是這三行：
var event = $.Event("tap")
event.cancelTouch = cancelAll
if (touch.el) touch.el.trigger(event)
因為 tap 事件是沒有什么延時的，所以直接移出來不會有什么影響，如果是延時事件就很尷尬了，暫時還想不出來什么解決方法。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/80522.html
摘要：隨著移動互聯網的發展，移動已經逐漸成為互聯網的主要入口，隨之而來的是前端在移動開發上面臨的各種機遇與挑戰，本文就一些常見移動端問題對移動開發需要注意的事項進行一下總結，必然不可能涉及方方面面，但會隨著筆者的積累持續更新。 隨著移動互聯網的發展，移動Web已經逐漸成為互聯網的主要入口，隨之而來的是前端在移動Web開發上面臨的各種機遇與挑戰，本文就一些常見移動端問題對移動Web開發需要注意...
摘要：隨著移動互聯網的發展，移動已經逐漸成為互聯網的主要入口，隨之而來的是前端在移動開發上面臨的各種機遇與挑戰，本文就一些常見移動端問題對移動開發需要注意的事項進行一下總結，必然不可能涉及方方面面，但會隨著筆者的積累持續更新。 隨著移動互聯網的發展，移動Web已經逐漸成為互聯網的主要入口，隨之而來的是前端在移動Web開發上面臨的各種機遇與挑戰，本文就一些常見移動端問題對移動Web開發需要注意...
閱讀 2980·2021-09-23 11:32
閱讀 2939·2021-09-22 15:12
閱讀 1719·2019-08-30 14:07
閱讀 3461·2019-08-29 16:59
閱讀 1651·2019-08-29 11:11
閱讀 2316·2019-08-26 13:50
閱讀 2436·2019-08-26 13:49
閱讀 2631·2019-08-26 11:49
