如何根据body的data-id属性条件激活禁用复制类JS代码

核心逻辑是先检查body标签是否包含data-id="no-copy"属性，只有满足该条件时，才绑定禁用右键、文本复制、Ctrl+U的事件监听，否则不执行任何限制逻辑。以下是完整的实现代码：

完整代码示例 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<!-- 需要启用限制时添加data-id="no-copy"；不需要则移除该属性 -->
<body data-id="no-copy">
  <!-- 提示框元素 -->
  <div id="alertBox"></div>
</body>

CSS #

#alertBox {
  max-width: 300px; 
  background-color: #333; 
  color: #fff; 
  font-size: 15px;
  text-align: center;
  border-radius: 2px; 
  padding: 10px; 
  position: fixed; 
  z-index: 9999; 
  right: 5%; 
  bottom: 20px; 
  display: none;
}

JavaScript #

// 检测body是否存在data-id="no-copy"属性
const shouldEnableRestrictions = document.body.getAttribute('data-id') === 'no-copy';

// 自定义提示框函数
function customAlert(message) {
  $('#alertBox').html(message).fadeIn(300).delay(2000).fadeOut(400);
}

// 仅满足条件时绑定限制事件
if (shouldEnableRestrictions) {
  // 禁用右键菜单
  document.addEventListener('contextmenu', function(event) {
    event.preventDefault();
    customAlert('右键点击已禁用');
  }, false);

  // 禁用文本复制
  document.addEventListener('copy', function(event) {
    event.preventDefault();
    customAlert('文本复制已禁用');
  }, false);

  // 禁用Ctrl+U查看源代码
  document.addEventListener('keydown', function(event) {
    if (event.ctrlKey && event.key === 'u') {
      event.preventDefault();
      customAlert('查看源代码已禁用');
    }
  }, false);
}

关键说明 #

1. 条件判断：通过document.body.getAttribute('data-id') === 'no-copy'判断是否启用限制，也可使用更简洁的document.body.dataset.id === 'no-copy'，两者效果一致。
2. 事件绑定逻辑：所有限制事件的监听都包裹在if条件内部，仅满足条件时才注册事件，避免冗余监听。
3. 功能补全：在原有右键禁用的基础上，补充了文本复制、Ctrl+U的禁用逻辑，完整覆盖需求。
4. 元素优化：将提示框独立为#alertBox元素，避免与body属性选择器混淆，逻辑更清晰。

内容的提问来源于stack exchange，提问作者Asma Binta Younus