如何禁止选中设置了模糊效果的div块内的文本内容

• 优先使用CSS原生属性实现，给你的模糊div添加user-select相关规则即可，完整示例代码如下：

/* 你的模糊div对应的类名 */
.target-blur-div {
  /* 原有模糊效果代码，此处仅为示例 */
  filter: blur(4px);
  /* 禁止文本选中的核心规则 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

• 若需要额外提升防复制能力，可搭配JS事件拦截实现：

// 选中目标div
const targetDiv = document.querySelector('.target-blur-div');
// 监听选中文本的触发事件，直接阻止默认行为
targetDiv.addEventListener('selectstart', e => e.preventDefault());

注意：以上方案仅能拦截普通用户的手动选中复制操作，无法阻止技术人员通过调试工具提取DOM节点中的文本内容，敏感内容请勿直接渲染到前端页面。

内容的提问来源于stack exchange，提问作者PRASANTH BATTULA