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

【问题标题】：stop Chrome's click and hold / drag image default behavior停止 Chrome 的单击并按住/拖动图像默认行为
【发布时间】：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">

【讨论】：

似乎不适用于 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;
}

【讨论】：

【解决方案4】：

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

勾选“欺骗下载者”

【讨论】：