實現

通過css實現頁面文字不能被選中

.cannotselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

css介紹

user-select

說明

控制選取能否被選擇.

該特性是非標準的，請儘量不要在生產環境中使用它！

Formal syntax: none | text | all | element

none:元素內的文字及其子元素將不會被選中
text:使用者可以選中文字
all:在一個HTML編輯器中，當雙擊子元素或者上下文時，那麼包含該子元素的最頂層元素也會被選中。
element:火狐和IE中有效. Enables selection to start within the element; however, the selection will be contained by the bounds of that element.

瀏覽器相容性

-webkit-touch-callout

說明

這個CSS 屬性禁用了預設的callout展示， callout是指當觸控並按住一個元素的時候出現的提示。

當在iOS上一直按住一個目標元素時，Safari會展示一個關於這個連結的callout資訊。webkit-touch-callout屬性允許禁用掉這一行為。

-webkit-touch-callout 屬性最早在 iOS 2.0 上實現，後來被新增到WebKit

允許的值

default:此值表示顯示預設的callout
none:此值表示禁用callout

瀏覽器相容性