WF禁止选中和复制文章

有客户不想让某篇文章被轻易复制，可以复制一个新的内容页模版，添加下面的的代码来实现禁止选中和复制文章的功能。

1. 最简单的方法：CSS user-select

这是目前最优雅、最常用的方法。通过 CSS 属性直接告诉浏览器这个元素的内容不可被选中。

.no-copy {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none;     /* IE 10+ */
  user-select: none;         /* 标准语法 */
}

• 优点：代码简洁，不影响页面性能。

• 缺点：用户虽然选不中文字，但如果右键点击“检查”，在 HTML 源码里还是能看到文字。

2. 拦截 JavaScript 事件

如果你想更彻底一点，可以通过 JS 监听并拦截用户的“复制”和“右键”行为。

const targetDiv = document.querySelector('.no-copy');
// 禁止右键菜单
targetDiv.addEventListener('contextmenu', e => e.preventDefault());
// 禁止拷贝行为
targetDiv.addEventListener('copy', e => {
  e.preventDefault();
  alert('抱歉，本内容禁止复制！');
});

• 组合拳：通常会将 onselectstart (禁止选中) 和 oncopy (禁止复制) 结合使用。