使用 jquery 禁用右键单击图像

我想知道如何使用 jQuery 禁用右键单击图像。

我只知道:

<script type="text/javascript" language="javascript">
$(document).ready(function() {
$(document).bind("contextmenu",function(e) {
return false;
});
});
</script>
112794 次浏览
小开
最佳答案

这种方法是有效的:

$('img').bind('contextmenu', function(e) {
return false;
});

或者更新的 jQuery:

$('#nearestStaticContainer').on('contextmenu', 'img', function(e){
return false;
});

JsFiddle 例子

小开

禁用右键的目的是什么。任何技巧的问题在于总有办法绕过它们。Firefox (firebug)和 chrome 的控制台允许解除该事件的绑定。或者如果你想保护图像，你可以随时查看图像的临时缓存。

如果您想创建自己的上下文菜单，可以使用 eventDefault。在这里选择你的战斗。甚至像 tnyMCE 这样的大型 JavaScript 库也不能在所有浏览器上工作... ... 这并不是因为它不可能; ——)。

$(document).bind("contextmenu",function(e){
e.preventDefault()
});

就我个人而言，我更倾向于开放的互联网。本机浏览器的行为不应该受到页面交互的阻碍。我相信还有其他方法可以找到互动，而不是右键点击。

小开

禁用右击选项 

<script type="text/javascript">
var message="Function Disabled!";


function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}


function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}


if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}


document.oncontextmenu=new Function("alert(message);return false")
</script>
小开

是否有可能留下右键点击和下载的能力，只是当做一个单独的水印放在图像上。当然，这不会阻止屏幕截图，但认为这可能是一个很好的中间地带。

小开

在 chrome 和 firefox 中，除非我使用“ live”而不是“ bind”，否则上面的方法不起作用。

这对我很有效:

$('img').live('contextmenu', function(e){
return false;
});
小开

你可以试试这个:

var message="Sorry, right-click has been disabled";


function clickIE() {
if (document.all) {
(message);
return false;
}
}


function clickNS(e) {
if (document.layers || (document.getElementById && !document.all)) {
if (e.which == 2||e.which == 3) {
(message);
return false;
}
}
}


if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = clickNS;
} else {
document.onmouseup = clickNS;
document.oncontextmenu = clickIE;
}


document.oncontextmenu = new Function("return false")

点击这里查看演示

小开

一个非常简单的方法是将图像作为背景添加到 DIV 中，然后加载一个空的透明 gif，设置为与前景中的 DIV 相同的大小。这样就可以把不那么坚定的人挡在外面。如果不查看代码并复制 URL，然后右键单击，他们就无法获得背景信息，只能下载透明的 gif。

小开

不使用 jQuery 的更好方法是:

const images = document.getElementsByTagName('img');
for (let i = 0; i < images.length; i++) {
images[i].addEventListener('contextmenu', event => event.preventDefault());
}
小开

这个应该可以

$(function(){
$('body').on('contextmenu', 'img', function(e){
return false;
});
});
小开

对于现代的浏览器，你所需要的只是这个 CSS:

img {
pointer-events: none;
}

旧的浏览器仍然允许图像上的指针事件，但是上面的 CSS 将照顾到绝大多数的访问者到您的网站，并结合使用 contextmenu方法应该给你一个非常可靠的解决方案。


提交答案