internet-explorer-10 - hashchange 事件未在 IE10 和 IE11 中触发，结合 history.pushState 和 url 手动操作

Question

我无法在 IE10 和 IE11 中始终触发 hashchange 事件

如果我使用 history.pushState 来改变当前的哈希值，然后在 url 中操作哈希值，那么 hashchange 将被触发一次。

然后，如果重复上述操作，则不会触发 hashchange

我创建了一个 jsbin 来测试这个问题。
要在 IE10/IE11 中复制该问题，只需单击部分链接(例如第 4 部分)，然后操作 url 中的部分 ID(例如第 3 部分)。 hashchange 应该被触发，但如果你重复，第二次就不会了。

http://jsbin.com/locor/5

顺便说一句 - 这在 Chrome 和 Firefox 中完美运行

Answer 1

下面有一个repro。似乎如果您使用 pushState 更改哈希值，则在检查 hashchange 事件时 IE 会忽略该更改。因此，如果您的哈希序列是:

#

#foo(通过 pushstate 添加)

#(手动添加到地址栏)

IE 将#3 与#1 进行比较，而不是#2。由于#1 === #3，IE 不会触发 hashchange 事件。

<script>
function log(message) {
    var div = document.getElementById("log");
    div.innerHTML += message + "<br>";
}
window.addEventListener("hashchange", function () {
    log("hashchange");
});
window.addEventListener("popstate", function(){
    log("popstate");
});
</script>
<p>1. Manually set the hash in the address bar to "#".</p>
<p><a onclick='history.pushState({}, "", "#somePushState");' style="color:blue;">2. Click here to run push state.</a></p>
<p>3. Manually set the hash in the address bar to "#".</p>

<br>
<p>Expected: browser fires hashchange event for #1 and #3. Actual: IE does not fire hashchange event for #3.</p>
<div id="log"><b>Log:</b><br></div>