onbeforeunload事件在IE9中太热情了

发布于 2024-12-02 12:12:18 字数 992 浏览 1 评论 0原文

下面是一些示例测试 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>

这可作为工作页面使用：timjeanes.com/ie9_onbeforeunload.htm

Firefox、Chrome 和 Safari，我得到了我想要的行为。也就是说，单击前两个链接中的任何一个都会显示一个警报对话框；单击第三个链接（或以其他方式导航离开）会显示“您确定要离开此页面吗？”信息。

然而，在 IE9 中，“您确定要离开此页面吗？”当您单击前两个链接中的任何一个时，即使没有进行导航，也会显示该消息 - 我们只是运行一些 JavaScript。

我做错了什么吗？或者IE有什么好的解决方法吗？

一种选择是使用 href="#" 并将我的 javascript 放在 onclick 中。我不喜欢这样做，因为它将用户带到页面顶部，而我的现实页面相当高。

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

原文

Here's some sample test 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>

This is available as a working page here: timjeanes.com/ie9_onbeforeunload.htm

In Firefox, Chrome and Safari, I get the behaviour I want. That is, clicking either of the first two links shows an alert dialog; clicking the third link (or otherwise navigating away) shows the "Are you sure you want to leave this page?" message.

However, in IE9, the "Are you sure you want to leave this page?" message also shows when you click either of the first two links, even though no navigation is taking place - we're just running some javascript.

Is there something I'm doing wrong? Or is there a nice workaround for IE?

One option would be to use href="#" and put my javascript in the onclick. I'm not keen on that as it takes the user to the top of the page, and my real-life page is quite tall.

I've not tested in other versions of IE.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

寂寞花火° 2024-12-09 12:12:18

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

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

像这样调用它：

<a href="#" onclick="myClickHandler(event)">Go nowhere 1</a>

编辑： 您可以像这样取消页面上所有哈希链接的事件：

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;
}

或者仅使用一行代码使用 jQuery：

$("a[href='#']").click(function (e) { e.preventDefault(); });

That's a pretty unfortunate bug. It seems you'll have to work around it, and using the hash link method is probably the best way. To avoid taking the user to the top of the page, cancel the event using event.preventDefault() and event.returnValue = false.

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

Call it like this:

<a href="#" onclick="myClickHandler(event)">Go nowhere 1</a>

Edit: You could cancel the event for all the hash-links on your page like this:

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;
}

Or with jQuery using just one line of code:

$("a[href='#']").click(function (e) { e.preventDefault(); });

回复收藏 0 原文

來不及說愛妳 2024-12-09 12:12:18

更简单的解决方案是在IE中使用onunload，在其他浏览器中使用onbeforeunload。

回复收藏 0 原文

櫻之舞 2024-12-09 12:12:18

href 中的 #null 来防止页面跳转，而不仅仅是 # 和 onclick="" 中的脚本

回复收藏 0 原文

请别遗忘我 2024-12-09 12:12:18

您不应该使用 href="javascript:... 绑定点击事件：下面的方法不好。

<a href="javascript:alert('Not going anywhere!');">Go nowhere 1</a>

如果您要使用 onclick 并无效 href，则只需在 onclick 中返回 false 即可。

<a onclick="alert('Not going anywhere!');return false;">Go nowhere 2</a>

You should not bind an event for click using href="javascript:...: Below is not good.

<a href="javascript:alert('Not going anywhere!');">Go nowhere 1</a>

If your going to use an onclick and void the href then just return false in the onclick.

<a onclick="alert('Not going anywhere!');return false;">Go nowhere 2</a>

回复收藏 0 原文

ㄟ。诗瑗 2024-12-09 12:12:18

“您确定要离开此页面吗？”实际上并不是一个错误。单击第一个链接时会弹出消息；这似乎是 IE 9 中的一项“功能” - 我不喜欢 IE 的更多原因

回复收藏 0 原文

~没有更多了~

关于作者

梦毁影碎の

暂无简介

0 文章

0 评论

25 人气

关注发私信

友情链接

文江博客

onbeforeunload事件在IE9中太热情了

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（5）

关于作者

相关话题

热门标签

推荐作者

已经忘了多久

15867725375

LonelySnow

走过海棠暮

轻许诺言

信馬由缰

友情链接

onbeforeunload事件在IE9中太热情了

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（5）

关于作者

相关话题

热门标签

推荐作者

已经忘了多久

15867725375

LonelySnow

走过海棠暮

轻许诺言

信馬由缰

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。