javascript 如何检测在触发 window.onbeforeunload 时是否单击了链接？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15277403/
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
how to detect if a link was clicked when window.onbeforeunload is triggered?
提问by mirin
I have window.onbeforeunload triggering properly. It's displaying a confirmation box to ensure the user knows they are navigating (closing) the window and that any unsaved work will be erased.
我有 window.onbeforeunload 正确触发。它显示一个确认框，以确保用户知道他们正在导航（关闭）窗口，并且任何未保存的工作都将被删除。
I have a unique situation where I don't want this to trigger if a user navigates away from the page by clicking a link, but I can't figure out how to detect if a link has been clicked inside the function to halt the function. This is what I have for code:
我有一个独特的情况，如果用户通过单击链接离开页面，我不希望触发此事件，但我不知道如何检测是否在函数内部单击了链接以停止函数. 这是我的代码：
window.onbeforeunload = function() {
var message = 'You are leaving the page.';
/* If this is Firefox */
if(/Firefox[\/\s](\d+)/.test(navigator.userAgent) && new Number(RegExp.) >= 4) {
if(confirm(message)) {
history.go();
}
else {
window.setTimeout(function() {
window.stop();
}, 1);
}
}
/* Everything else */
else {
return message;
}
}
回答by rodneyrehm
You're looking for deferred event handling. I'll explain using jQuery, as it is less code:
您正在寻找延迟事件处理。我将使用 jQuery 进行解释，因为它的代码较少：
window._link_was_clicked = false;
window.onbeforeunload = function(event) {
if (window._link_was_clicked) {
return; // abort beforeunload
}
// your event handling
};
jQuery(document).on('click', 'a', function(event) {
window._link_was_clicked = true;
});
a (very) poor man's implementation without jQuery's convenient delegation handling could look like:
没有 jQuery 方便的委托处理的（非常）穷人的实现可能如下所示：
document.addEventListener("click", function(event) {
if (this.nodeName.toLowerCase() === 'a') {
window._link_was_clicked = true;
}
}, true);
this allows alllinks on your page to leave without invoking the beforeunloadhandler. I'm sure you can figure out how to customize this, should you only want to allow this for a specific set of links (your question wasn't particularly clear on that).
这允许您页面上的所有链接在不调用beforeunload处理程序的情况下离开。如果您只想允许一组特定的链接（您的问题不是特别清楚），我相信您可以弄清楚如何自定义它。
回答by mirin
var link_was_clicked = false;
document.addEventListener("click", function(e) {
if (e.target.nodeName.toLowerCase() === 'a') {
link_was_clicked = true;
}
}, true);
window.onbeforeunload = function() {
if(link_was_clicked) {
link_was_clicked = false;
return;
}
//other code here
}
回答by joost
You can differ between a link unloador a reload/user entering a different address unloads by using a timer. This way you know the beforeunloadwas triggered directly after the link click.
您可以使用计时器区分 alink unload或 a reload/user entering a different address unloads。这样你就知道beforeunload是在链接点击后直接触发的。
Example using jQuery:
使用 jQuery 的示例：
$('a').on('click', function(){
window.last_clicked_time = new Date().getTime();
window.last_clicked = $(this);
});
$(window).bind('beforeunload', function() {
var time_now = new Date().getTime();
var link_clicked = window.last_clicked != undefined;
var within_click_offset = (time_now - window.last_clicked_time) < 100;
if (link_clicked && within_click_offset) {
return 'You clicked a link to '+window.last_clicked[0].href+'!';
} else {
return 'You are leaving or reloading the page!';
}
});
(tested in Chrome)
（在 Chrome 中测试）
