javascript 停止 Chrome 的点击并按住/拖动图片默认行为

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16283017/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 04:03:19  来源:igfitidea点击:

stop Chrome's click and hold / drag image default behavior

javascriptjqueryhtmlcssgoogle-chrome

提问by Irfan Mir

I've noticed that in Google Chrome, one can click and hold an image and while holding a semi-transparent copy of that image attaches itself with the cursor. Then one can drag that image to the desktop to save it.

我注意到在谷歌浏览器中,您可以点击并按住一张图片,同时按住该图片的半透明副本将其与光标相连。然后可以将该图像拖到桌面进行保存。

I want to prevent and stop the semi-transparent version of the image attaching itself to the cursor on hold of certain images in my site.

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

How can I do this?

我怎样才能做到这一点?

回答by Bigood

You can prevent this behavior by using the property

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

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

See the doc of -webkit-user-dragCSS-infos.net(I didn't find an MDN doc, if someone has a better reference)

请参阅-webkit-user-dragCSS-infos.net的文档(我没有找到 MDN 文档,如果有人有更好的参考)



How to use

如何使用

Add a .nonDraggableImageclass on your imgtags, and add on your CSS :

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

.nonDraggableImage{
    -webkit-user-drag: none;
}

回答by Sablefoste

Another way is to create a transparent picture over the top of the picture you want to prevent viewing.

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

Please see: http://www.dwuser.com/education/content/stop-the-thieves-strategies-to-protect-your-images/

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

check under "Tricking the downloaders"

在“欺骗下载者”下检查

回答by BBlackwo

I had to use a different solution to get it working:

我不得不使用不同的解决方案来让它工作:

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

Thanks: https://stackoverflow.com/a/7439078/2443005

谢谢:https: //stackoverflow.com/a/7439078/2443005