如何禁用右键单击一个特定图像上的保存

Question

我正在运营一个亚洲电子商务网站,用户可以在其中发布产品图片.有没有办法禁用页面上只有1个特定图像的右键单击？

例如,在查看产品时,会有一个大图像,然后是产品的一些缩略图.当我试图右键单击大图像时,我想禁用右键单击,但如果他们试图右键单击缩略图,我不希望右键单击禁用.

谢谢

ps - 我完全理解为什么不禁用右键单击的可用性原因,但亚洲的版权和图像盗窃是一个比北美国家更大的问题.此外,对于卖家而言,这比实际保护内容更为安心.

Answer 1

完全阻止人是徒劳的,然而,我至少让它稍微困难的首选方法是在图像的顶部放置一个div.

<div id="image-container" style="postion: relative;">
   <img src="" alt="" />
   <div style="width: 100%; height: 100%; position: absolute; top: 0; left: 0"></div>
</div>

玩它来获得你想要的东西.为了使它看起来更具语义,您可以将文本放在空的div"图像是版权"中,然后text-indent: -9999px对其进行操作.我经常尝试将空元素转化为语义.

在说,我最喜欢绕过这样做的人(例如eBay)的方法是使用插件Nuke Anything Enhanced for Firefox.使用divover the image技巧将花费我大约2秒钟来绕过.

Answer 2

虽然它不符合W3C,oncontextmenu="return false;"但属性应该完全符合您的要求.

Answer 3

如果你想要的只是阻止用户保存你的图片，你可以通过使用 pointer-events css 属性来做到这一点：

img {
  pointer-events: none;
}

本质上，这将阻止任何鼠标事件到 img 元素。您仍然会得到一个对话框，但这与背景图像是一样的。

https://developer.mozilla.org/pt-BR/docs/Web/CSS/pointer-events https://css-tricks.com/almanac/properties/p/pointer-events/