jquery DIV设置不可选择

原创

mob64ca12e51ecb 2024-02-13 04:06:10 ©著作权

文章标签 jQuery html 代码示例 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12e51ecb的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery DIV设置不可选择

在网页开发中，有时我们需要限制用户对某些元素进行选择。例如，在一些特定的布局中，我们希望禁止用户选择某个 div 元素中的文本内容。通过使用 jQuery，我们可以很方便地实现这个功能。

设置不可选择的代码示例

下面是一个简单的示例，展示如何使用 jQuery 来设置一个 div 元素不可选择：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery DIV设置不可选择</title>
  <script src="
  <style>
    .unselectable {
      -webkit-user-select: none; /* Safari 3.1+ */
      -moz-user-select: none; /* Firefox 2+ */
      -ms-user-select: none; /* IE 10+ */
      user-select: none; /* Standard syntax */
    }
  </style>
  <script>
    $(document).ready(function() {
      $(".unselectable").addClass("unselectable");
    });
  </script>
</head>
<body>
  <div class="unselectable">
    这是一个不可选择的文本。
  </div>
</body>
</html>

上述代码中，我们首先引入 jQuery 库，然后在 <style> 标签中定义了一个名为 unselectable 的类，用于设置不可选择的样式。-webkit-user-select、-moz-user-select 和 -ms-user-select 分别是针对不同浏览器的私有属性，user-select 是标准属性。通过将这些属性设置为 none，可以禁止用户选择元素内的文本内容。

在 <script> 标签中，我们使用 $(document).ready() 方法来确保 DOM 元素已经加载完毕。然后，我们使用 .addClass() 方法将 unselectable 类添加到所有具有 unselectable 类的元素上。这样，所有具有 unselectable 类的 div 元素都将禁止用户选择其内部文本。

序列图示例

下面是一个使用 mermaid 语法标识的序列图示例，展示了上述代码的执行过程：

sequenceDiagram
  participant User
  participant Document as "Web Document"
  participant Browser as "Web Browser"
  participant jQuery as "jQuery Library"

  User->>Browser: 打开网页
  Browser->>Document: 加载网页
  Document->>Browser: 加载 jQuery 库
  Browser->>Document: 解析并执行脚本
  Document->>jQuery: 加载完毕
  jQuery->>Document: 执行 $(document).ready() 回调
  Document->>jQuery: 查找所有具有 unselectable 类的元素
  jQuery->>Document: 添加 unselectable 类
  Document->>Browser: 渲染页面