禁用复制和粘贴+右键单击网站[关闭]答案

【问题标题】：Disable Copy and Paste + Right Click on the website [closed]禁用复制和粘贴+右键单击网站[关闭]
【发布时间】：2021-11-17 13:12:55
【问题描述】：

我一直在寻找解决方案，以在我的网站上为所有设备完全禁用复制和粘贴 + 选择的可能性。所以我在我的网站上找到并实施了这个解决方案：

我在标签下方添加了 JavaScript 代码：

<script>
var isNS = (navigator.appName == "Netscape") ? 1 : 0;
if(navigator.appName == "Netscape") document.captureEvents(Event.MOUSEDOWN||Event.MOUSEUP);
function mischandler(){
return false;
}
function mousehandler(e){
var myevent = (isNS) ? e : event;
var eventbutton = (isNS) ? myevent.which : myevent.button;
if((eventbutton==2)||(eventbutton==3)) return false;
}
document.oncontextmenu = mischandler;
document.onmousedown = mousehandler;
document.onmouseup = mousehandler;
</script>

然后我已将此 CSS 添加到我的 style.css 文件中：

* {
  user-select: none;
  -webkit-user-select: none;/*IE,etc*/
  -moz-user-select: none; /*Mozzila Firefox*/
  -ms-user-select: none;
}

第一个代码阻止任何浏览器上的右键单击操作（即使是启用复制 Chrome 扩展程序），第二个代码将阻止文本选择的可能性。

一切正常，但此解决方案不适用于移动设备，我没有安卓手机，但我已在 iOS 设备上测试过，我可以轻松地从我的网站选择和复制文本。

还有其他解决方案我可以用来在移动设备上禁用此功能吗？

请不要告诉我我不应该这样做，因为我已经看到了 UX 或其他花哨的答案。我正在寻找解决方案而不是建议... 非常感谢您抽出宝贵的时间，如果我将线程加倍，我很抱歉，但我被告知不要在其他帖子中问这个问题。因此，如果找到解决方案，希望这篇文章将是对复制和粘贴主题的完整回答。

【问题讨论】：

解决方案是，您无法阻止坚定的用户对您的网站进行任何他们想要的操作。您基本上是在试图阻止他们下载他们已经下载并且必须下载才能使您的网站正常运行的内容。
“请不要告诉我我不应该这样做，因为我已经看到了 UX 或其他花哨的答案。我正在寻找解决方案，而不是寻求建议” 用户体验极差的事实不是“花哨的答案”，这是事实（虽然不方便）。没有办法 100% 防止这种行为，因为用户可以简单地查看您的页面源代码并从那里复制您的内容，而按设计 的额外工作量很小。你真的应该重新考虑这样的要求，并了解你真正试图阻止什么，因为你所追求的这种方法根本没有效果。
如上，有太多的情况是你无法预防的；不会阻止屏幕阅读器/扫描仪复制文本、打开源代码、保存 html 文件，如果您真的需要，您可以直观地抓取网站。您可以放置尽可能多的 CSS/JS 解决方案，但您不会有一个可行的解决方案，这是否值得？（更好的解决方案是开发您的浏览器来防止这种情况发生）。
顺便说一下，考虑到人们也使用选择来帮助阅读。我认识几个这样做的人。他们选择行或第一行的一半和第二行的一半，这样做是为了在阅读时可以轻松地跟随文本，而不会跳过行，就像有些人在报纸和书籍中使用手指作为阅读辅助一样。您正在积极损害可访问性。
“我正在为美容行业的客户创建一个网站，他们的竞争对手在该网站上复制他们的文章或文本并在他们的 FB 页面上使用。”这是一个法律问题，而不是技术问题。

标签： javascript html css

【解决方案1】：

您可以使用 WebKit 指针事件无。使用以下 CSS：

.avoid-clicks {
  pointer-events: none;
}

并将avoid-clicks 类添加到您不想右键单击的任何内容中。

【讨论】：

谢谢，但这在 iOS 上不起作用
你可以使用：touch-action: none;这可能适用于 iOS。
Ethan，是的，这个接缝适用于 iOS。我将触摸操作设置为 pan-y 以防止任何水平滚动，但这效果更好。感谢您指出这一点。
很高兴它成功了。

【解决方案2】：

添加这些：

-webkit-touch-callout: none;
-khtml-user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);

【讨论】：

谢谢，但这在 iOS 上不起作用