点击锚点导致页面跳转时停止重定向

Question

我想防止页面重定向，我知道可以通过以下方式实现

window.onbeforeunload = function() {
        return "Dude, are you sure you want to leave? Think of the kittens!";
}

这个问题在这里已经有了答案。

但是在我的情况下，我只想阻止页面在点击任何锚点时重定向。

另外，event.preventDefault() 在我点击锚点时将不起作用，因为并不是所有的锚点都会重定向页面，所以它应该能正常工作。

我只想停止通过点击锚点重定向页面。有什么解决方法吗？

- commit

---

当单击锚点时设置一个标志。然后在此处理程序中检查该标志。 - Ian

你可以查看.caller参见：https://dev59.com/sEnSa4cB1Zd3GeqPKhD_ - Diodeus - James MacFarlane

Answer 1

您可以设置一个标志来告诉您用户是否单击了 a 标签，然后在您的 onbeforeunload 脚本中读取该标志：

window.onbeforeunload = function () {
    if (_clickedAnchor) {
        _clickedAnchor = false;
        return "Dude, are you sure you want to leave? Think of the kittens!";
    }
}

_clickedAnchor = false;

jQuery(document).ready(function () {
    jQuery("a").click(function () {
        _clickedAnchor = true;
    });
});

- Joe Enos

---

@DRobinson 如果你还没有使用jQuery，那么你可能是对的，但问题标记了它 - 如果你正在使用jQuery，那我建议你尽可能地使用它。比起处理特定于浏览器的事件问题，这样做要简单得多。 - Joe Enos

是的，我想是这样（关于JQuery）。 - DRobinson

@DRobinson 在链接上按Tab键并按回车仍会触发“click”事件。 - Joe Enos

然后，是的，我唯一看到的问题就像Diodeus解释的那样。您可以将href存储在_clickedAnchor中，并检查它是否为null或以“＃”开头，而不是true / false。将其设置为null，通常情况下将其设置为false。仍然不完美，因为它很可能具有带有捕获单击并返回false以防止重定向的代码的href。 - DRobinson

@JoeEnos 谢谢，真的是非常好的解决方案，超出了我的想象。 - commit

Answer 2

你可以使用 onhashchange。

使用 jQuery：

$(window).on('hashchange', function() {
    alert('bye byee?');
});

纯DOM JavaScript：

window.onhashchange = function() {
    alert('bye byee?');
};

注意：对于不支持此事件的旧浏览器，您需要创建自定义的“hash-change”处理程序。

您可以使用setInterval轻松完成此操作，并检测document.location.hash中的任何更改。

---

为旧版浏览器提供onhashchange的故障保护：

var currentHash = document.location.hash;

window.prototype.onhashchange = function( callback ) {
    if(typeof(callback) == 'function') {
        setInterval(function() {
            if(document.location.hash !== currentHash) {
                callback();
            }
        }, 650); // more than a half-a-second delay
    }
}

你可以将它作为常规 DOM 约定中的事件使用。

- user1386320

---

我正在使用jquery 1.7和IE 9，但它不起作用，我将尝试这个回调函数。 - commit

Answer 3

既然你标记了jQuery，我会用它来解决这个问题。你可以获取所有的a标签，然后检查锚点是否是一个重定向，然后使用e.preventDefault();

$('a').on('click',function(e){
    if ($(this).attr('href') != window.location.href)
    {
       e.preventDefault();
       //do stuff
    }
});

- Jnatalzia

Answer 4

如果单击链接，调用者将为空：

window.onbeforeunload = function() {
    alert(window.onbeforeunload.caller)    
}

- Diodeus - James MacFarlane

---

它每次都返回 null，即使我从 URL 刷新页面。 - commit

但是如果您从JS函数刷新它，则应该获得函数名称。 - Diodeus - James MacFarlane