我正在运营一个亚洲电子商务网站,用户在该网站上发布他们产品的图片。有没有办法在页面上仅禁用 1 个特定图像的右键单击?
例如,查看产品时,有一张大图,然后是产品的一些缩略图。尝试右键单击大图像时,我想禁用右键单击,但如果他们尝试右键单击缩略图,我不想禁用右键单击。
谢谢
ps - 我完全理解为什么不禁用右键单击的可用性原因,但亚洲的版权和图像盗窃问题比北美国家大得多。另外,这比实际保护内容更能让卖家安心。
我正在运营一个亚洲电子商务网站,用户在该网站上发布他们产品的图片。有没有办法在页面上仅禁用 1 个特定图像的右键单击?
例如,查看产品时,有一张大图,然后是产品的一些缩略图。尝试右键单击大图像时,我想禁用右键单击,但如果他们尝试右键单击缩略图,我不想禁用右键单击。
谢谢
ps - 我完全理解为什么不禁用右键单击的可用性原因,但亚洲的版权和图像盗窃问题比北美国家大得多。另外,这比实际保护内容更能让卖家安心。
完全阻止人们是徒劳的,然而,我更喜欢的至少让它稍微困难一点的方法是在图像的顶部放置一个 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。使用div
过度图像技巧将需要我大约 2 秒的时间才能绕过。
虽然它不符合 W3C 标准,但oncontextmenu="return false;"
作为属性应该完全符合您的要求。
如果您想要的只是阻止用户保存您的图像,您可以使用指针事件 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/
如果您在网络上发布图像,则没有万无一失的方法可以阻止某人保存副本。它必须通过网络发送才能显示,并且确定的用户可以使用诸如 Wireshark 或 Fiddler 之类的工具或任何浏览器调试框架(例如 Firebug)来拦截它,即使您找到一种方法来禁用右键单击和拖放到桌面。
恕我直言,您可以做的难度要大得多,但是付出的努力不值得。