如何使用 JavaScript 阻止浏览器对退格按钮的默认历史后退动作?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3850442/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 02:27:59  来源:igfitidea点击:

How to prevent browser's default history back action for backspace button with JavaScript?

javascriptevents

提问by Tower

Is there a way to prevent the default action from occurring when the user presses backspace on a browser? I don't need to prevent the user from leaving, just from having the default backspace action. I need the backspace to do something different (it's a game).

有没有办法防止用户在浏览器上按退格键时发生默认操作?我不需要阻止用户离开,只需使用默认的退格操作即可。我需要退格来做一些不同的事情(这是一个游戏)。

I tried without success:

我试过没有成功:

window.addEventListener('keydown', function(e) {
    if (e.keyCode === Game.Key.BACK_SPACE)
    {
        e.preventDefault();
        e.stopPropagation();
        return false;
    }
}, false);

If I put an alert inside the if, the alert will be shown for backspace key press. So, the keyCode is correct.

如果我在 if 中放置一个警报,则将在按下退格键时显示警报。所以,keyCode 是正确的。

Edit: This has to work in Opera 10.6, Firefox 4, Chrome 6, IE 9 and Safari 5.

编辑:这必须在 Opera 10.6、Firefox 4、Chrome 6、IE 9 和 Safari 5 中工作。

回答by Tim Down

You don't need return falseor e.stopPropagation(); neither will make any difference in a listener attached with addEventListener. Your code won't work in Opera, which only allows you to suppress the default browser behaviour in the keypressevent, or IE <= 8, which doesn't support addEventListener. The following should work in all browsers, so long as you don't already have keydownand keypressevent handlers on the document.

你不需要return falsee.stopPropagation(); 两者都不会对附加的侦听器产生任何影响addEventListener。您的代码在 Opera 中不起作用,它只允许您在keypress事件中禁止默认浏览器行为,或者 IE <= 8,它不支持addEventListener. 以下应在所有的浏览器,只要你还没有keydownkeypress对事件处理程序document

EDIT: It also now filters out events that originated from an <input>or <textarea>element:

编辑:它现在还过滤掉源自<input>or<textarea>元素的事件:

function suppressBackspace(evt) {
    evt = evt || window.event;
    var target = evt.target || evt.srcElement;

    if (evt.keyCode == 8 && !/input|textarea/i.test(target.nodeName)) {
        return false;
    }
}

document.onkeydown = suppressBackspace;
document.onkeypress = suppressBackspace;

回答by Marek Bar

I found at Telerik's page script ready to use. Script blocks back button action: by clicking in browser back button and backspace on page. This script works. I'm using it in my project. http://www.telerik.com/community/code-library/aspnet-ajax/general/disable-backspace-from-master-page.aspx

我在 Telerik 的页面脚本中发现可以使用。脚本阻止后退按钮操作:通过单击浏览器后退按钮和页面上的退格。这个脚本有效。我在我的项目中使用它。 http://www.telerik.com/community/code-library/aspnet-ajax/general/disable-backspace-from-master-page.aspx

回答by Paolo

If you prefer to simply have the fix for yourself, without affecting other users when scripting into the web page, read below.

如果您更喜欢简单地为自己修复,而不在编写脚本到网页时影响其他用户,请阅读以下内容。

Here's some solutions that only change the browser you are using:
- Firefox on Linux "unmapped" the backspace behavior since 2006 so it's not affected; (at any rate, it was simply set to scroll up before then)
- Chrome has just announced that it will do the same from now on; (http://forums.theregister.co.uk/forum/1/2016/05/20/chrome_deletes_backspace/)
- Firefox on Windows can be set to ignore backspace by going into about:config and changing the backspace_action setting to 2; (http://kb.mozillazine.org/Browser.backspace_action)
- Safari ?!

以下是一些仅更改您使用的浏览器的解决方案:
- Linux 上的 Firefox 自 2006 年“取消映射”退格行为,因此不受影响;(无论如何,在此之前它只是简单地设置为向上滚动)
- Chrome 刚刚宣布它将从现在开始做同样的事情;( http://forums.theregister.co.uk/forum/1/2016/05/20/chrome_deletes_backspace/)
- 通过进入 about:config 并将 backspace_action 设置更改为 2,可以将 Windows 上的 Firefox 设置为忽略退格;(http://kb.mozillazine.org/Browser.backspace_action
- Safari ?!