
* { 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)用程序可以在pointermove和pointerup監(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)鍵字auto、none、manipulation,或
零或任何一個(gè)關(guān)鍵字pan-x、pan-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”有效)。
啟用多手指平移和縮放頁面。 這可以與任何平移值組合。
正式語法
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;
}
