您現在的位置: 365建站網 > 365學習 > 滑動時候錯誤提示:Unable to preventDefault inside passive event listener

滑動時候錯誤提示:Unable to preventDefault inside passive event listener

文章來源:365jz.com     點擊數:1157    更新時間:2018-11-11 19:01   參與評論

移動端Web界面滾動性能優化 Passive event listeners

mui頁面,js點擊事件嵌套ajax,提示:Unable to preventDefault inside passive

問題描述:


用MUI例子中的選項卡,底部的導航只能實現div切換,鏈接無法跳轉。


查看控制臺,輸出:Unable to preventDefault inside passive event listener due to target 的警告。


技術分享


問題解決:


經檢查相關資料,加入以下代碼,即可解決問題。


mui(‘body‘).on(‘tap‘,‘a‘,function(){document.location.href=this.href;});


問題原因:


MUI在選項卡中的文字中已說明:


通過DIV模擬一個獨立頁面,通過DIV的顯示、隱藏模擬不同頁面的切換,典型的SPA模式;


所以默認的選項卡只適用于頁面內多個div切換顯示,如要做頁面跳轉,則需要加JavaScript代碼修改瀏覽器地址。


手機版加入代碼:


mui(‘body‘).on(‘tap‘,‘a‘,function(){document.location.href=this.href;});


電腦版加入代碼:


mui(‘body‘).on(‘click‘,‘a‘,function(){document.location.href=this.href;});


引申:


為什么手機中要用trap,而不和電腦一樣的click事件。


首先兩者都會在點擊時觸發,但是在手機web端,click會有 200~300 ms,所以請用tap代替click作為點擊事件。但在本次問題中,在手機web端使用click,也能實現跳轉,并無影響


MUI底部選項卡鏈接跳轉不了


最近更新了ios11.3,項目上發現這么一個問題,“我的”頁面和兩個列表頁的滾動出現了問題,滾動時候不僅滾動了希望滾動的部分,整體的頁面也跟隨者上下滾動,整個頁面非??D。

  1. 這兩個頁面都用了touch事件

  2. 控制臺打印如下警告:

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. 
See https://www.chromestatus.com/features/5093566007214080

解決辦法1:

在touch的事件監聽方法上綁定第三個參數{ passive: false },
通過傳遞 passive 為 false 來明確告訴瀏覽器:事件處理程序調用 preventDefault 來阻止默認滑動行為。

elem.addEventListener(  'touchstart',
  fn,
  { passive: false }
);

解決辦法2:

 * { touch-action: pan-y; } 
 使用全局樣式樣式去掉

Passive event listeners

2016年Google I/O上提出的概念,目的是用來提升頁面滑動的流暢度。

For instance, in Chrome for Android 80% of the touch events that block scrolling never actually prevent it. 10% of these events add more than 100ms of delay to the start of scrolling, and a catastrophic delay of at least 500ms occurs in 1% of scrolls.

在 Android 版 Chrome 瀏覽器的 touch 事件監聽器的頁面中,80% 的頁面都不會調用 preventDefault 函數來阻止事件的默認行為。在滑動流暢度上,有 10% 的頁面增加至少 100ms 的延遲,1% 的頁面甚至增加 500ms 以上的延遲。

由于瀏覽器無法預先知道一個事件處理函數中會不會調用 preventDefault(),它需要等到事件處理函數執行完后,才能去執行默認行為,然而事件處理函數執行是要耗時的,這樣一來就會導致頁面卡頓,也就是說,當瀏覽器等待執行事件的默認行為時,大部分情況是白等了。

如果 Web 開發者能夠提前告訴瀏覽器:“我不調用 preventDefault 函數來阻止事件事件行為”,那么瀏覽器就能快速生成事件,從而提升頁面性能,Passive event listeners 的提出就解決了這樣的問題。

如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇


發表評論 (1157人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
自拍偷拍福力视频,偷拍国际精品,麻豆一区福利电影,国产网红视频午夜福利,se视频大全,久久国产AV影院 国产sm女在线调教网站| 浪货 这么湿 趴好bl| 免费吃奶摸下激烈视频| 免费国产成人高清在线视频| 性xxxxx15学生| 18禁止观看强奷无码视频| 伊人久久五月丁香综合中文亚洲| 多瑙影院| 亚洲国产欧美在线观看片不卡| 欧美亚洲国产精品久久| 国产老妇伦国产熟女老妇高清| 黑人30公分全部进入正在播放| 人妻少妇精品无码专区| 巨胸美女露双奶头无遮挡| apanese2530| 破外女出血视频全过程| 熟妇人妻无码中文字幕老熟妇| 男人天堂2018在线| 成年永久免费播放平台| 大量老肥熟女偷拍视频| 女人黄裸体无遮挡免费视频| 国产午夜福利在线播放| 中文字幕无码A片久久东京热| 秋霞在线| 黑黑的肥岳| 跟狗狗做了四小时| >kaylani lei HD XXX| 两个人的视频全免费高清bd| 国产第|页草草影院| 97亚洲色欲色欲综合网| 欧美巨乳大香蕉在线观看| http://www.hhhnzyzmujs.com