mui 頁面提示:Unable to preventDefault inside passive

解方法:給您的樣式中加入下面的樣式即可解決去掉錯(cuò)誤提示。

* { touch-action: none; }

CSS屬性?touch-action?用于設(shè)置觸摸屏用戶如何操縱元素的區(qū)域(例如,瀏覽器內(nèi)置的縮放功能)。

/* Keyword values */

touch-action:auto;

touch-action:none;

touch-action:pan-x;

touch-action:pan-left;

touch-action:pan-right;

touch-action:pan-y;

touch-action:pan-up;

touch-action:pan-down;

touch-action:pinch-zoom;

touch-action:manipulation;

/* Global values */

touch-action:inherit;

touch-action:initial;

touch-action:unset;

初始值auto

適用元素all elements except: non-replaced inline elements, table rows, row groups, table columns, and column groups

是否是繼承屬性

適用媒體visual

計(jì)算值as specified

Animation typediscrete

正規(guī)順序the unique non-ambiguous order defined by the formal grammar

默認(rèn)情況下,平移(滾動(dòng))和縮放手勢(shì)由瀏覽器專門處理。 使用?Pointer_events?的應(yīng)用程序?qū)⒃跒g覽器開始處理觸摸手勢(shì)時(shí)收到一個(gè)pointercancel?事件。 通過明確指定瀏覽器應(yīng)該處理哪些手勢(shì),應(yīng)用程序可以在pointermovepointerup監(jiān)聽器中為其余的手勢(shì)提供自己的行為。 使用?Touch_events?的應(yīng)用程序通過調(diào)用?preventDefault()?禁用瀏覽器處理手勢(shì),但也應(yīng)使用觸摸操作確保瀏覽器在調(diào)用任何事件偵聽器之前,了解應(yīng)用程序的意圖。

當(dāng)手勢(shì)開始時(shí),瀏覽器與觸摸的元素及其所有祖先的觸摸動(dòng)作值相交直到一個(gè)實(shí)現(xiàn)手勢(shì)(換句話說,第一個(gè)包含滾動(dòng)元素)的觸摸動(dòng)作值。 這意味著在實(shí)踐中,觸摸動(dòng)作通常僅適用于具有某些自定義行為的單個(gè)元素,而無需在該元素的任何后代上明確指定觸摸動(dòng)作。 手勢(shì)開始之后,觸摸動(dòng)作值的更改將不會(huì)對(duì)當(dāng)前手勢(shì)的行為產(chǎn)生任何影響。


語法

touch-action 屬性可以被指定為:

任何一個(gè)關(guān)鍵字autonone、manipulation,或

零或任何一個(gè)關(guān)鍵字pan-xpan-left、pan-right,加零或任何一個(gè)關(guān)鍵字pan-y、pan-up、pan-down,加可選關(guān)鍵字pinch-zoom.

auto

當(dāng)觸控事件發(fā)生在元素上時(shí),由瀏覽器來決定進(jìn)行哪些操作,比如對(duì)viewport進(jìn)行平滑、縮放等。

none

當(dāng)觸控事件發(fā)生在元素上時(shí),不進(jìn)行任何操作。

pan-x

啟用單指水平平移手勢(shì)??梢耘cpan-y 、pan-up、pan-down?和/或pinch-zoom?組合使用。

pan-y

啟用單指垂直平移手勢(shì)。可以與pan-x 、pan-left 、pan-right?和/或pinch-zoom?組合使用。

manipulation

瀏覽器只允許進(jìn)行滾動(dòng)和持續(xù)縮放操作。任何其它被auto值支持的行為不被支持。啟用平移和縮小縮放手勢(shì),但禁用其他非標(biāo)準(zhǔn)手勢(shì),例如雙擊以進(jìn)行縮放。 禁用雙擊可縮放功能可減少瀏覽器在用戶點(diǎn)擊屏幕時(shí)延遲生成點(diǎn)擊事件的需要。 這是“pan-x pan-y pinch-zoom”(為了兼容性本身仍然有效)的別名。

pan-left,pan-right,pan-up,pan-down

啟用以指定方向滾動(dòng)開始的單指手勢(shì)。 一旦滾動(dòng)開始,方向可能仍然相反。 請(qǐng)注意,滾動(dòng)“向上”(pan-up)意味著用戶正在將其手指向下拖動(dòng)到屏幕表面上,同樣?pan-left?表示用戶將其手指向右拖動(dòng)。 多個(gè)方向可以組合,除非有更簡單的表示(例如,“pan-left pan-right”無效,因?yàn)椤?b>pan-x”更簡單,而“pan-left pan-down”有效)。

pinch-zoom

啟用多手指平移和縮放頁面。 這可以與任何平移值組合。

正式語法

auto|none|[[pan-x|pan-left|pan-right]||[pan-y|pan-up|pan-down]||pinch-zoom]|manipulation

示例

最常見的用法是禁用元素(及其不可滾動(dòng)的后代)上的所有手勢(shì),以使用自己提供的拖放和縮放行為(如地圖或游戲表面)。

#map{touch-action:none;}

另一種常見的模式是使用指針事件處理水平平移的圖像輪播,但不想干擾網(wǎng)頁的垂直滾動(dòng)或縮放。

.image-carousel{width:100%;height:150px;touch-action:pan-y pinch-zoom;}

觸摸動(dòng)作也經(jīng)常用于完全解決由支持雙擊縮放手勢(shì)引起的點(diǎn)擊事件的延遲。

html {

? touch-action: manipulation;

}


?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 今天在寫vue項(xiàng)目的時(shí)候碰到一個(gè)Unable to preventDefault inside passive e...
    奶瓶SAMA閱讀 7,547評(píng)論 0 2
  • 原文首發(fā)于 baishusama.github.io,歡迎圍觀~ 存疑 最開始,我遇到的其實(shí)是“移動(dòng)端遮罩層滑動(dòng)穿...
    白蜀黍閱讀 1,853評(píng)論 1 17
  • 項(xiàng)目里面出現(xiàn)增加了一個(gè)橫向滾動(dòng)的商品(整個(gè)屏幕是可以上下滑動(dòng)的)。手指按在橫向商品區(qū)時(shí)在ios上可以上下滑動(dòng),但是...
    AAA前端閱讀 5,916評(píng)論 0 3
  • 手勢(shì)圖片控件 PinchImageView 點(diǎn)擊圖片框架 photoView packagecom.example...
    Ztufu閱讀 805評(píng)論 0 1
  • 效果圖: Github鏈接:https://github.com/boycy815/PinchImageView ...
    CQ_TYL閱讀 2,353評(píng)論 0 0

友情鏈接更多精彩內(nèi)容