js 防止按键返回前一页面

本文介绍了一种通过JavaScript实现的网页按键屏蔽方法,包括如何阻止用户使用特定的快捷键和功能键,如F5刷新、Ctrl+N新建窗口等,并提供了具体的代码实现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

做参考,自认为注释还算详细,  
  请按需所取  
   
  <html>  
    <script>  
  function   KeyDown(){   //屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键  
    //alert("ASCII代码是:"+event.keyCode);  
      if   ((window.event.altKey)&&  
              ((window.event.keyCode==37)||       //屏蔽   Alt+   方向键   ←  
                (window.event.keyCode==39))){     //屏蔽   Alt+   方向键   →  
            alert("不准你使用ALT+方向键前进或后退网页!");  
            event.returnValue=false;  
            }  
      if   ((event.keyCode==8)     ||                                   //屏蔽退格删除键  
              (event.keyCode==116)||                                   //屏蔽   F5   刷新键  
              (event.keyCode==112)||                                   //屏蔽   F1   刷新键  
              (event.ctrlKey   &&   event.keyCode==82)){   //Ctrl   +   R  
            event.keyCode=0;  
            event.returnValue=false;  
            }  
      if   ((event.ctrlKey)&&(event.keyCode==78))       //屏蔽   Ctrl+n  
            event.returnValue=false;  
      if   ((event.shiftKey)&&(event.keyCode==121))   //屏蔽   shift+F10  
            event.returnValue=false;  
      if   (window.event.srcElement.tagName   ==   "A"   &&   window.event.shiftKey)    
              window.event.returnValue   =   false;     //屏蔽   shift   加鼠标左键新开一网页  
      if   ((window.event.altKey)&&(window.event.keyCode==115)){   //屏蔽Alt+F4  
              window.showModelessDialog("about:blank","","dialogWidth:1px;dialogheight:1px");  
              return   false;}  
  }  
  function   Showhelp(){  
    alert("按了F1");  
    return   false;  
  }  
    </script>  
    <head>  
      <meta   http-equiv="Content-Language"   content="zh-cn">  
      <meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312">  
      <title>键盘代码</title>  
      <style>  
        <!--  
  body                   {   font-family:   Verdana;   color:   #000080;   font-size:   9pt   }  
  --></style>  
    </head>  
    <body   onkeydown="KeyDown()"   oncontextmenu="event.returnValue=false"   onhelp="Showhelp();return   false;">  
      <p   align="center">请按键盘</p>  
    </body>  
  </html>  

### H5 页面禁用侧滑返回手势的解决方案 为了在 H5 页面中禁用侧滑返回手势,可以采用多种方式来阻止浏览器默认行为或者通过特定平台(如 Android 或 iOS)提供的方式进行处理。以下是几种常见的技术手段及其适用场景: #### 方法:监听 `touchmove` 和 `touchstart` 事件 可以通过 JavaScript 来捕获触摸事件并阻止其默认行为,从而达到禁用手势的效果。 ```javascript document.addEventListener('touchmove', function(event) { event.preventDefault(); // 阻止默认的手势操作 }, { passive: false }); // 设置为非被动模式以允许 preventDefault() ``` 这种方法适用于大多数移动设备上的 Web 浏览器环境[^1]。 #### 方法二:固定页面滚动区域 如果仅需简单地限制页面内的滚动和手势交互,则可以直接调整 CSS 样式,使整个文档不可滚动。这通常用于 Vue.js 或其他框架开发的应用程序中。 ```css body { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } ``` 此方法能够有效防止用户触发任何类型的触控反馈动作,包括但不限于左右滑动手势[^3]。 #### 方法三:针对 iOS 平台特殊处理 对于运行于 Safari 上的内容来说,有时即使上述措施已实施完毕仍可能出现异常情况——即所谓的“右滑返回”机制未能正常关闭。此时可尝试利用 Objective-C 编写原生插件,在加载 HTML 文件之修改 UINavigationController 的配置参数;亦或是借助第三方库完成类似效果。 ```objc // 在 viewDidLoad 中执行如下代码即可抑制全局范围内的 popGesture 动作。 self.navigationController.interactivePopGestureRecognizer.enabled = NO; ``` 而在混合应用架构里头,我们更倾向于推荐直接调用 WebView 提供的相关 API 实现相同目的[^4]: ```java @Override public boolean dispatchTouchEvent(MotionEvent ev){ if(ev.getAction()==MotionEvent.ACTION_DOWN&&isInterceptBackPress()){ return true;//拦截掉back键按下事件 } return super.dispatchTouchEvent(ev); } private boolean isInterceptBackPress(){ //自定义逻辑判断当是否应该截断返回按键 return mWebView.canGoBack(); } ``` 以上便是关于如何在不同条件下成功规避不必要的手指拖拽所引发的历史记录跳转现象的些技巧分享啦!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值