本人公司项目,业务提出需求要求在登录完成后禁止鼠标后退快捷键
操作页面回退至登陆页面。
首先,想到了监听鼠标事件,鼠标监听事件包括以下几种:
- click:单击事件。
- dblclick:双击事件。
- mousedown:按下鼠标键时触发。
- mouseup:释放按下的鼠标键时触发。
- mousemove:鼠标移动事件。
- mouseover(mouseenter):移入事件。
- mouseout(mouseleave):移出事件。
- 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()删除监听事件,会失效。