onbeforeunload事件在IE9中过于热烈

tee*_*yay 23 javascript onbeforeunload internet-explorer-9

这是一些示例测试html:

<!DOCTYPE html>
<html>
  <body>
    <a href="javascript:alert('Not going anywhere!');">Go nowhere 1</a>
    <a href="javascript:void(0);" onclick="alert('Not going anywhere!');">Go nowhere 2</a>
    <a href="http://www.google.com">Go somewhere</a>
    <script type="text/javascript">
      window.onbeforeunload = function() { return "Really leave?"; };
    </script>
  </body>
</html>
Run Code Online (Sandbox Code Playgroud)

这可以在这里找到工作页面:timjeanes.com/ie9_onbeforeunload.htm

在Firefox,Chrome和Safari中,我得到了我想要的行为.也就是说,单击前两个链接中的任何一个都会显示一个警告对话框; 单击第三个链接(或以其他方式导航)显示"您确定要离开此页面吗?" 信息.

但是,在IE9中,"你确定要离开这个页面吗?" 当您单击前两个链接中的任何一个时,即使没有正在进行导航,也会显示消息 - 我们只是运行一些javascript.

有什么我做错了吗?或者IE有一个很好的解决方法吗?

一种选择是使用href ="#"并将我的javascript放入onclick.我并不热衷于此,因为它将用户带到了页面的顶部,而我的真实页面非常高.

我没有在其他版本的IE中测试过.

gil*_*ly3 17

这是一个非常不幸的错误.看来你必须解决它,使用哈希链接方法可能是最好的方法.为避免将用户带到页面顶部,请使用event.preventDefault()和取消事件event.returnValue = false.

function myClickHandler(e) {
    if (e.preventDefault)
        e.preventDefault();
    e.returnValue = false;
    alert("Not going anywhere!");
}
Run Code Online (Sandbox Code Playgroud)

像这样称呼它:

<a href="#" onclick="myClickHandler(event)">Go nowhere 1</a>
Run Code Online (Sandbox Code Playgroud)

编辑:您可以取消页面上所有哈希链接的事件,如下所示:

var links = document.links;
for (var i = 0; i < links.length; i++) {
    var link = links[i];
    if (link.href == "#") {
        if (link.addEventListener) {
            link.addEventListener("click", cancelEvent, false);
        }
        else if (link.attachEvent) {
            link.attachEvent("onclick", cancelEvent);
        }
    }
}
function cancelEvent(e) {
    e = e || window.event;
    if (e.preventDefault)
        e.preventDefault();
    e.returnValue = false;
}
Run Code Online (Sandbox Code Playgroud)

或者使用jQuery只使用一行代码:

$("a[href='#']").click(function (e) { e.preventDefault(); });
Run Code Online (Sandbox Code Playgroud)


Cpn*_*nch 5

一个更简单的解决方案是在IE中使用onunload,在其他浏览器中使用onbeforeunload.