javascript 为什么历史回溯在 Firefox 中的 <a> onclick 上不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20420717/
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
Why does history back not work on <a> onclick in Firefox?
提问by lukpaw
I don't understand why in Firefox, window.history.back()does work on a button:
我不明白为什么在 Firefox 中，window.history.back()在按钮上工作：
<button onclick="window.history.back()">Go back</button>
But it does not work for a link:
但它不适用于链接：
<a onclick="window.history.back()">Go back</a>
What is the difference?
有什么区别？
An example illustrating this:
一个例子说明了这一点：
index.html
索引.html
<!DOCTYPE html>
<html>
<body>
<h1>First page</h1>
<br/>
<a href="second.html">Second</a>
</body>
</html>
second.html
第二个.html
<!DOCTYPE html>
<html>
<body>
<h1>Second page</h1>
<a href="third.html">Third</a>
<br/>
<br/>
<button onclick="window.history.back()">Go Back (button)</button>
<br/>
<a href="javascript: void(0);" onclick="window.history.back()">Go Back (a)</a>
</body>
</html>
third.html
第三个.html
<!DOCTYPE html>
<html>
<body>
<h1>Third page</h1>
<br/>
<button onclick="window.history.back()">Go Back (button)</button>
<br/>
<a href="javascript: void(0);" onclick="window.history.back()">Go Back (a)</a>
</body>
</html>
Scenario:
设想：
- Run index.html and click Second.
- On second.html click Third.
- On third.html click Go back (a).
- On second.html click Go back (a). Boom! I'm on the third.html, and not on the first.html!!!
- 运行 index.html 并单击Second。
- 在 second.html 点击Third。
- 在 third.html 上单击Go back (a)。
- 在 second.html 单击Go back (a)。繁荣！我在第三个.html 上，而不是在第一个.html 上！！！
Plunker example(Note! Run it on Firefox)
Plunker 示例（注意！在 Firefox 上运行它）
If you use Go back (button)it works. What is the difference in <a onclickand <button onclickin this case?
如果您使用返回（按钮），它会起作用。在这种情况下<a onclick和<button onclick在这种情况下有什么区别 ？
回答by Justus Romijn
You are facing this issue (quoted from vikku.info):
您正面临这个问题（引自 vikku.info）：
But what had happened when i press the back button after navigating to various pages was i got locked between the last two navigated pages.
但是当我导航到各个页面后按下后退按钮时发生的事情是我被锁定在最后两个导航页面之间。
Someone in the comments hit the nail on this issue.
评论中有人在这个问题上一针见血。
- When you create the
onclickattribute, you are attaching an additional event handler for clicking a link. However, the browser will still handle some nativelogic, so it will still add the current page to the history; - When you pass in specific javascript into the
hrefattribute, you are actually overriding the nativelogic of the browser, so it won't add the current page to the history;
- 创建
onclick属性时，您将附加一个用于单击链接的附加事件处理程序。但是，浏览器仍然会处理一些原生逻辑，因此它仍然会将当前页面添加到历史记录中； - 当您将特定的 javascript 传递到
href属性中时，您实际上是在覆盖浏览器的本机逻辑，因此它不会将当前页面添加到历史记录中；
SIMPLE, DIRTY SOLUTION
简单、肮脏的解决方案
HTML:
HTML：
<a href="javascript:window.history.back();">Back</a>
IMPROVED SOLUTION
改进的解决方案
I've also created an example (Plunker example) that makes use of the native preventDefaultfunctionality (MDN on preventDefault). In that case, it is not needed to write javascript in the hrefattribute. Now, you can support users that are not using javascript by linking to, for example, the homepage. You better also avoid using inline event handlers.
我还创建了一个示例（Plunker 示例），它利用了本机preventDefault功能（preventDefault 上的 MDN）。在这种情况下，不需要在href属性中编写 javascript 。现在，您可以通过链接到例如主页来支持不使用 JavaScript 的用户。您还最好避免使用内联事件处理程序。
HTML:
HTML：
<a href="index.html" id="backButton">Back</a>
Javascript:
Javascript：
var backbutton = document.getElementById("backButton");
backbutton.onclick = function(e){
e = e || window.event; // support for IE8 and lower
e.preventDefault(); // stop browser from doing native logic
window.history.back();
}
回答by LittleSweetSeas
I think it may be related to the hrefattribute of the atag, that get interpreted as a next step in navigation (even if you go back in history).
我认为这可能与标签的href属性有关a，它被解释为导航的下一步（即使你回到历史中）。
Try removing the hrefattribute from the a.
尝试href从a.
As you see, this way it works:
如您所见，它是这样工作的：
You do need just to fix CSS for the anow
你只需要以修复CSS的a现在
回答by Mr.G
Try this:
试试这个：
$("#back").click(function(e) {
e.preventDefault();
history.back(1);
})
or
或者
<a href="javascript:void(0);" onclick="window.history.go(-1); return false;"> Link </a>
