如何在react中禁止浏览器后退

本人公司项目,业务提出需求要求在登录完成后禁止鼠标后退快捷键操作页面回退至登陆页面。
首先,想到了监听鼠标事件,鼠标监听事件包括以下几种:

  1. click:单击事件。
  2. dblclick:双击事件。
  3. mousedown:按下鼠标键时触发。
  4. mouseup:释放按下的鼠标键时触发。
  5. mousemove:鼠标移动事件。
  6. mouseover(mouseenter):移入事件。
  7. mouseout(mouseleave):移出事件。
  8. contextmenu:右键事件
    上述所有事件均无法监听到机械键盘鼠标侧边的后退快捷键
    因此,采用了另外一种禁止浏览器后退的方法
componentDidMount(){
	 window.addEventListener('popstate', function () {
      	history.pushState(null, null, document.URL);
    });
}

注意:禁止回退到哪个页面,代码就加入到哪个页面中。
列如从A跳转到B。如果禁止B页面回退到A。则上述代码加入到A页面中
可能出现的报错
意外的使用history no-restricted-global(禁用特定的全局变量)
解决方式:‘在history前面加widnow.’

componentDidMount(){
	 window.addEventListener('popstate', function () {
      window.history.pushState(null, null, document.URL);
    });
}

此外,不要在 componentWillUnmount()删除监听事件,会失效。

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值