資訊專欄INFORMATION COLUMN
摘要：最近做項(xiàng)目經(jīng)常在的控制臺(tái)看到如下提示于是了一番，找到這篇文章，有了詳細(xì)解釋。簡(jiǎn)而言之由于瀏覽器必須要在執(zhí)行事件處理函數(shù)之后，才能知道有沒(méi)有掉用過(guò)，這就導(dǎo)致了瀏覽器不能及時(shí)響應(yīng)滾動(dòng)，略有延遲。
最近做項(xiàng)目經(jīng)常在 chrome 的控制臺(tái)看到如下提示：
Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080
于是 Google 了一番，找到這篇文章，有了詳細(xì)解釋。Making touch scrolling fast by default
簡(jiǎn)而言之：
由于瀏覽器必須要在執(zhí)行事件處理函數(shù)之后，才能知道有沒(méi)有掉用過(guò) preventDefault() ，這就導(dǎo)致了瀏覽器不能及時(shí)響應(yīng)滾動(dòng)，略有延遲。
所以為了讓頁(yè)面滾動(dòng)的效果如絲般順滑，從 chrome56 開(kāi)始，在 window、document 和 body 上注冊(cè)的 touchstart 和 touchmove 事件處理函數(shù)，會(huì)默認(rèn)為是 passive: true。瀏覽器忽略 preventDefault() 就可以第一時(shí)間滾動(dòng)了。
舉例：
wnidow.addEventListener("touchmove", func) 效果和下面一句一樣
wnidow.addEventListener("touchmove", func, { passive: true })
這就導(dǎo)致了一個(gè)問(wèn)題：
如果在以上這 3 個(gè)元素的 touchstart 和 touchmove 事件處理函數(shù)中調(diào)用 e.preventDefault() ，會(huì)被瀏覽器忽略掉，并不會(huì)阻止默認(rèn)行為。
測(cè)試：
body {
margin: 0;
height: 2000px;
background: linear-gradient(to bottom, red, green);
}
// 在 chrome56 中，照樣滾動(dòng)，而且控制臺(tái)會(huì)有提示，blablabla
window.addEventListener("touchmove", e => e.preventDefault())
那么如何解決這個(gè)問(wèn)題呢？不讓控制臺(tái)提示，而且 preventDefault() 有效果呢？
兩個(gè)方案：
1、注冊(cè)處理函數(shù)時(shí)，用如下方式，明確聲明為不是被動(dòng)的
window.addEventListener("touchmove", func, { passive: false })
2、應(yīng)用 CSS 屬性 touch-action: none; 這樣任何觸摸事件都不會(huì)產(chǎn)生默認(rèn)行為，但是 touch 事件照樣觸發(fā)。
touch-action 還有很多選項(xiàng)，詳細(xì)請(qǐng)參考touch-action
[注]未來(lái)可能所有的元素的 touchstart touchmove 事件處理函數(shù)都會(huì)默認(rèn)為 passive: true
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/88154.html
摘要：最近做了一個(gè)物體可拖拽的需求，由于在手機(jī)上的支持性不是很好，就利用了系列事件，改變的進(jìn)行位移，從而達(dá)到物體跟隨手指移動(dòng)的效果。但是發(fā)現(xiàn)了有以下提示雖然最終找到了原因是升級(jí)版本具體提給了，但是卻讓我陷入了思考。 最近做了一個(gè)物體可拖拽的需求，由于drag-and-drop在手機(jī)上的支持性不是很好，就利用了touch系列事件，改變transform的translate進(jìn)行位移，從而達(dá)到物體...
摘要：先上錯(cuò)誤信息一個(gè)簡(jiǎn)單的頁(yè)面只有這么段報(bào)的一個(gè)好錯(cuò)誤，真是日了狗了，一直這么寫(xiě)的代碼，什么情況原來(lái)，是新版，給這個(gè)返回了，不再是清除瀏覽器默認(rèn)行為了。 先上錯(cuò)誤信息： Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www....
摘要：滑動(dòng)時(shí)頁(yè)面警告解決方法不支持的解決辦法姓名身份證號(hào)碼重點(diǎn)在于給設(shè)置高度和偽元素微信去掉底部返回橫條問(wèn)題框自動(dòng)填充內(nèi)容背景顏色為黃色設(shè)置文字不居中設(shè)置間距和等值即可 滑動(dòng)時(shí)頁(yè)面警告 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as pas...
摘要：滑動(dòng)時(shí)頁(yè)面警告解決方法不支持的解決辦法姓名身份證號(hào)碼重點(diǎn)在于給設(shè)置高度和偽元素微信去掉底部返回橫條問(wèn)題框自動(dòng)填充內(nèi)容背景顏色為黃色設(shè)置文字不居中設(shè)置間距和等值即可 滑動(dòng)時(shí)頁(yè)面警告 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as pas...
閱讀 3504·2023-04-26 02:44
閱讀 1635·2021-11-25 09:43
閱讀 1529·2021-11-08 13:27
閱讀 1895·2021-09-09 09:33
閱讀 908·2019-08-30 15:53
閱讀 1773·2019-08-30 15:53
閱讀 2781·2019-08-30 15:53
閱讀 3115·2019-08-30 15:44
