CSS禁止文字选中的实现方法

一、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属性。不同浏览器支持不同的属性，需要根据具体需求选择合适的方案来实现禁止文字选中的效果。