JavaScript 实现禁止鼠标右键及文本选择

JavaScript 实现禁止鼠标右键及文本选择

当用户访问网页时，若遇到精美的图片或优质的文字内容，通常的操作是选中目标后点击鼠标右键，在弹出的上下文菜单中选择“图片另存为”或“复制”以保存或引用内容。然而，许多网站为了版权保护或防止内容抓取，会屏蔽鼠标右键功能。本文将探讨如何利用JavaScript实现这一禁止右键菜单的效果。

禁止鼠标右键相关事件说明

在开始具体代码实现前，需要了解禁止鼠标右键相关的JavaScript事件机制。

<script type="text/javascript">
document.oncontextmenu=new Function("event.returnValue=false;");
document.onselectstart=new Function("event.returnValue=false;");
</script>

Firefox 兼容性处理

需要注意的是，某些针对Firefox浏览器的旧版屏蔽代码可能失效，因此需要采用更通用的兼容写法。

<!DOCTYPE html>
<html>
<head>
<title>禁止鼠标右键</title>
<meta charset="utf-8">
</head>
<body>
<div class="poo">这个页面不能使用鼠标右键</div>
<!-- 禁止鼠标右键 -->
<script type="text/javascript">
if (window.Event){ 
document.captureEvents(Event.MOUSEUP); 
}
function nocontextmenu(){ 
event.cancelBubble = true 
event.returnValue = false; 
return false; 
} 
function norightclick(e) { 
if (window.Event) {
if (e.which == 2 || e.which == 3) 
return false; 
} else if (event.button == 2 || event.button == 3){ 
event.cancelBubble = true 
event.returnValue = false; 
return false; 
}
} 
document.oncontextmenu = nocontextmenu; // for IE5+ 
document.onmousedown = norightclick; // for all others 
</script> 
</body>
</html>

禁止文本选择功能

除了禁止右键菜单，通常还需要配合禁用文本选择功能，以防止用户直接复制页面文字。

<script type="text/javascript">
var omitformtags=["input", "textarea", "select"];
omitformtagsomitformtags=omitformtags.join("|");
function disableselect(e){
if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1){
return false;
}
}
function reEnable(){
return true;
}
if (typeof document.onselectstart!="undefined"){
document.onselectstart=new Function ("return false");
}else{
document.onmousedown=disableselect;
document.onmouseup=reEnable;
}
</script>

屏蔽 Ctrl 按键操作

此外，为了更严格的保护，有时还需要屏蔽Ctrl键的组合操作，防止通过快捷键复制内容。

document.onkeydown=function(){
if(event.ctrlKey)return false;
}

以上介绍了使用JavaScript实现禁止鼠标右键及相关保护功能的几种方法。希望这些示例代码能对前端开发者有所帮助。如有任何疑问或建议，欢迎留言交流，小编将及时回复。感谢大家对本站的支持！