JavaScript屏蔽Ctrl+S、F12及右键菜单的浏览器兼容方案

作者:白露

时间:2026-10-23

浏览:344

本文详解如何在JavaScript中屏蔽Ctrl+S、F12及鼠标右键。针对IE、Firefox、Chrome等不同浏览器对event对象的差异处理,提供兼容写法。重点解决Firefox需延迟生效、IE8以下需使用window.event及return false等特殊兼容问题,并包含iframe内屏蔽右键的实现代码。

文章目录

键盘事件基础与兼容处理

键盘事件处理

常规键盘按键事件处理方式


document.onkeydown=function (event) {
  //检测按下哪个键,作相应处理
};

event参数代表键盘事件,Chrome、Firefox、IE(含Edge)、IE10及IE9均支持函数内置的e参数,而IE8及以下版本仅能识别window.event,因此通用兼容写法为event=event||window.event。获取按键码通常使用event.keyCode,该属性在各主流浏览器中均兼容。


document.onkeydown=function (event) {
   event=event||window.event;
   var key=event.keyCode;
   //检测按下哪个键,作相应处理
   if(key==...){
}    
 };

屏蔽浏览器默认事件主要有三种方法: 1)event.preventDefault() 2)event.returnValue=false; 3)return false;

键盘事件基础与兼容处理

Firefox延迟生效与IE特殊兼容方案

Firefox的特殊支持机制在于其需要增加延迟才能生效,否则仍会弹出浏览器保存当前页面的窗口,示例如下:


document.onkeydown=function (event) {
        //判断按键 
         var key=event.keyCode;
        if(key== 83 && e.ctrlKey){
            /*延迟,兼容FF浏览器 */
            setTimeout(function(){
              alert('ctrl+s');
            },1);
            event.preventDefault();//或者是 return false;  
          }

IE10、IE9及IE8以下版本对event.returnValue=false的特殊支持机制要求键盘事件event必须为window.event时,Ctrl+S的默认事件才能被屏蔽。在event=event||window.event的兼容写法中,IE8及以下的形参event为空,因此取值为window.event;而IE10和IE9的function形参event有效,直接取值为event,导致在event=event||window.event写法下Ctrl+S屏蔽失效。

若需让所有IE版本屏蔽Ctrl+S,event取值必须为window.event。由于window.event不具备preventDefautl方法,因此屏蔽默认事件只能使用return false;。

兼容IE、Firefox、Chrome屏蔽Ctrl+S的写法如下:


document.onkeydown=function (e) {
       e=window.event||e;
       if(key== 83 && e.ctrlKey){
          /*延迟,兼容FF浏览器 */
          setTimeout(function(){
           alert('www.qdxw.net');
          },1);
          return false;   
        }  
      };

鼠标右键及iframe内屏蔽实现

屏蔽鼠标右键的写法示例


window.document.oncontextmenu = function (){
   alert('亲,你想干嘛,不要做坏事哦');
   return false;
 }

若当前页面包含iframe,则iframe内的右键功能依然可用。

屏蔽页面内iframe右键的写法示例


document.getElementById('web').onload = function(){
  window.document.getElementById('web').contentWindow.document.oncontextmenu = function(){
    alert('www.qdxw.net');
    return false;
    } 
}

web为iframe标签的ID属性。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章