一、pointer-events屬性
1、使用pointer-events屬性可以禁止鼠標事件，從而達到禁止文字選中的效果。
2、pointer-events有四種可選值，分別是auto、none、visiblePainted、all。其中，none表示完全禁止鼠標事件，而其他三個值是部分允許鼠標事件的。
.unselectable {
pointer-events: none;
}
二、user-select屬性
1、使用user-select屬性可以控制元素內部文本是否可以選中，可以達到禁止文字選中的效果。
2、user-select有三個可選值，分別是auto、none、text。其中，none表示完全禁止選中文本，而其他兩個值只是控制文本是否容易選中。
.unselectable {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
三、-webkit-touch-callout屬性
1、-webkit-touch-callout屬性可以控制在移動設備上長按元素時是否顯示系統默認菜單，進而禁止文字選中。
2、-webkit-touch-callout有兩個可選值，分別是default和none。其中，none表示完全禁止長按系統默認菜單的出現。
.unselectable {
-webkit-touch-callout: none;
}
四、-moz-user-select屬性
1、-moz-user-select屬性可以控制火狐瀏覽器中文本是否可以選中，達到禁止文字選中的效果。
2、該屬性只適用於火狐瀏覽器，其他瀏覽器需要使用user-select屬性。
.unselectable {
-moz-user-select: none;
}
五、總結
本文介紹了CSS禁止文字選中的四種實現方法，包括pointer-events屬性、user-select屬性、-webkit-touch-callout屬性和-moz-user-select屬性。不同瀏覽器支持不同的屬性，需要根據具體需求選擇合適的方案來實現禁止文字選中的效果。
原創文章，作者：NGLAB，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/332525.html
微信掃一掃 
支付寶掃一掃 