停止 Chrome 的单击并按住/拖动图像默认行为

Posted 2023-02-22

【中文标题】停止 Chrome 的单击并按住/拖动图像默认行为

【英文标题】：stop Chrome's click and hold / drag image default behavior

【发布时间】：2013-04-23 09:03:15

【问题描述】：

我注意到，在 Google Chrome 中，您可以单击并按住图像，然后在按住该图像的半透明副本的同时将其自身附加到光标上。然后可以将该图像拖到桌面进行保存。

我想防止和停止图像的半透明版本附加到我网站中某些图像的光标上。

我该怎么做？

【参考方案1】：

我喜欢用——可拖动

draggable="假"

<img draggable="false" src="image.jpg">

但是你可以试试 - ondragstart

ondragstart="return false;"

<img ondragstart="return false;" src="image.jpg">

或 - 指针事件（某些浏览器不支持并且还有其他问题）

style="pointer-events: none;"

<img src="image.jpg" style="pointer-events: none;">

【参考方案2】：

我必须使用不同的解决方案才能使其正常工作：

<img src="http://placehold.it/150x150" draggable="false">

谢谢：https://***.com/a/7439078/2443005

【讨论】：

似乎不适用于 Firefox（使用 Mac Firefox 69

这是 2020 年的正确答案。适用于 Firefox、Chrome、Opera、Edge 甚至 Internet Explorer。有趣的是，这是如何被否决的，并且“-webkit-user-drag”答案..显然只适用于基于 webkit 的浏览器（大声笑）被赞成。也许只是过时了。

【参考方案3】：

您可以通过使用该属性来防止这种行为

-webkit-user-drag: auto | element | none;

查看-webkit-user-dragCSS-infos.net的文档（我没有找到MDN文档，如果有人有更好的参考）

---

如何使用

在您的 img 标签上添加一个 .nonDraggableImage 类，并添加您的 CSS：

.nonDraggableImage
    -webkit-user-drag: none;

【讨论】：

没有与此属性等效的 IE。

这对于防止按钮样式的链接（Bootstrap a.btn）被笨拙的用户（我）意外拖动也很有用

似乎不适用于 Firefox（使用 Mac Firefox 69）

@BenWheeler 实际上，它是 webkit 属性，而不是标准（因此是强制性的 -webkit 前缀）。

【参考方案4】：

另一种方法是在要阻止查看的图片顶部创建透明图片。

请看： http://www.dwuser.com/education/content/stop-the-thieves-strategies-to-protect-your-images/

勾选“欺骗下载者”

【讨论】：

+1 好技巧 :) 因为它可以防止基本用户右键单击和保存。但是防止OP行为的“干净”方法仍然是使用-webkit-user-drag: none;