一、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/n/332525.html
微信扫一扫 
支付宝扫一扫 