CSS禁止选择|极客教程

CSS禁止选择

在网页设计中，我们经常会遇到需要禁止用户选择特定内容的情况。这可能是因为我们不希望用户复制我们的文字或图片，或者是因为我们想隐藏一些敏感信息。无论出于什么目的，CSS提供了一种简单的方法来禁止选择页面中的内容。

如何禁止选择文本

要禁止选择文本，我们可以使用user-select属性。该属性允许我们控制用户是否能选择页面中的文本。

.unselectable {
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer */
  -khtml-user-select: none; /* KHTML browsers */
  -webkit-user-select: none; /* Chrome, Safari, and Opera */
  user-select: none;
}

在上面的示例中，我们定义了一个类名为unselectable，并将user-select属性设置为none。这样就会禁止用户选择该元素及其子元素的文本了。

通过JavaScript禁止选择内容

除了使用CSS来禁止选择内容，我们还可以通过JavaScript来实现这一功能。下面是一个简单的示例：

document.addEventListener('selectstart', function(e) {
  e.preventDefault();
});

在上面的代码中，我们通过监听selectstart事件来禁止用户选择内容。当用户尝试选择文本时，浏览器将触发这个事件，并且我们通过e.preventDefault()来阻止默认行为，从而禁止选择内容。

示例

下面是一个示例，演示了如何使用CSS和JavaScript来禁止选择页面中的内容：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>禁止选择内容示例</title>
<style>
.unselectable {
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer */
  -khtml-user-select: none; /* KHTML browsers */
  -webkit-user-select: none; /* Chrome, Safari, and Opera */
  user-select: none;
}
</style>
<script>
document.addEventListener('selectstart', function(e) {
  e.preventDefault();
});
</script>
</head>
<body>
<p class="unselectable">这段文字不能被选择。</p>
</body>
</html>

在上面的示例中，<p>元素使用了unselectable类名来禁止选择。同时，通过JavaScript的代码来监听selectstart事件，从而实现了禁止选择页面中的内容的效果。