如何防止 window.onbeforeunload 被 IE 中的 javascript: href 链接触发？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7650063/
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 can I prevent window.onbeforeunload from being triggered by javascript: href links in IE?
提问by Maxx
I'm building a fail safe for my form that is going to warn users that if they leave the page their form data will be lost (similar to what gmail does).
我正在为我的表单构建一个故障保险，它会警告用户，如果他们离开页面，他们的表单数据将丢失（类似于 gmail 所做的）。
window.onbeforeunload = function () {
if (formIsDirty) {
return "You have unsaved data on this form. Don't leave!";
}
}
The above function works great in firefox, but in IE it is triggered by any href link, even ones that are links to javascript and not other pages.
上述函数在 Firefox 中运行良好，但在 IE 中它由任何 href 链接触发，即使是指向 javascript 而不是其他页面的链接。
for example....
例如....
<a href='javascript:someFunction();'>click</a>
I'm wondering if there is any way to get around this, as I do not want the user thinking that they are leaving the page when they are simply clicking a button on it. I do not have the option of rewriting all the various linksas they are built in and numerous.
我想知道是否有任何方法可以解决这个问题，因为我不希望用户认为他们只是在点击页面上的按钮时就离开了页面。我没有重写所有各种链接的选项，因为它们是内置的并且数量众多。
Any ideas?
有任何想法吗？
回答by Dr.Molle
You may remove and re-assign the onbeforeunload when hovering those links:
悬停这些链接时，您可以删除并重新分配 onbeforeunload ：
jQuery(
function($)
{
//store onbeforeunload for later use
$(window).data('beforeunload',window.onbeforeunload);
//remove||re-assign onbeforeunload on hover
$('a[href^="javascript:"]')
.hover(
function(){window.onbeforeunload=null;},
function(){window.onbeforeunload=$(window).data('beforeunload');}
);
}
);
回答by Ginchen
I just ran into a similar problem and found a very easy solution:
我刚刚遇到了类似的问题，并找到了一个非常简单的解决方案：
$("a").mousedown(function() {
$(window).unbind();
});
This will remove the onbeforeunload event just before the click event is triggered.
这将在触发 click 事件之前移除 onbeforeunload 事件。
回答by Tim Down
Move any script to a clickevent handler instead, with a fallback page for users without JavaScript:
将任何脚本移动到click事件处理程序，为没有 JavaScript 的用户提供后备页面：
<a href="foo.html" onclick="someFunction(); return false">click</a>
The unobtrusive JS champions out there will probably object to the use of the onclickattribute, but the fact is that it works, it's the simplest way to add an event handler and the simplest way to provide an example. For better separation of concerns, you could instead use either a DOM0 onclickproperty, addEventListener()/ attachEvent()or a library.
不引人注目的 JS 拥护者可能会反对使用该onclick属性，但事实是它有效，它是添加事件处理程序的最简单方法，也是提供示例的最简单方法。为了更好的关注分离，可以转而使用一个DOM0onclick属性addEventListener()/attachEvent()或库。
回答by Lone Ranger
If you include a bookmark symbol in the href of the a tag you should be able to still use the onclick event to include your JavaScript.
如果您在 a 标签的 href 中包含书签符号，您应该仍然能够使用 onclick 事件来包含您的 JavaScript。
<a href="#" onclick='someFunction();'>click</a>
I've run a number of tests and this appears to execute the JavaScript without triggering the onbeforeunload event. I'd be curious to know if this works for others or if you still have the same problem after implementing a tags in this manner.
我已经运行了许多测试，这似乎在不触发 onbeforeunload 事件的情况下执行 JavaScript。我很想知道这是否适用于其他人，或者在以这种方式实现标签后您是否仍然遇到同样的问题。
回答by Matthew Flaschen
(Like some of the other answers, this requires changing how the JavaScript is bound. If that doesn't work for you, disregard.)
（与其他一些答案一样，这需要更改 JavaScript 的绑定方式。如果这对您不起作用，请忽略。）
I found that in IE 7 through IE 10, simply using jQuery .click() with preventDefaultworks without showing the onbeforeunloadmessage (IE 11 does not show the beforeunloadmessage for any of my test cases). This is true whether the href is '#' or javascript:void(0). I expect the conclusion holds if attachEvent/addEventListeneris used directly, but I didn't test that.
我发现在 IE 7 到 IE 10 中，只需使用 jQuery .click() 即可preventDefault工作而不显示onbeforeunload消息（IE 11 不显示beforeunload我的任何测试用例的消息）。无论 href 是 '#' 还是javascript:void(0). 如果直接使用attachEvent/ ，我希望结论成立addEventListener，但我没有对此进行测试。
There is a demo of the below at http://jsbin.com/tatufehe/1. Both of the versions (in green) with preventDefaultwork (don't show the beforeunloaddialog). The one without preventDefaultdoes show it (as a comparison).
以下是http://jsbin.com/tatufehe/1的演示。两个版本（绿色）都有preventDefault工作（不显示beforeunload对话框）。没有的preventDefault确实显示了它（作为比较）。
$( document ).ready( function () {
$( 'a' ).click( function ( evt ) {
$( '#display' ).text( 'You clicked: ' + $( this ).text() );
if ( $(this).hasClass( 'withPreventDefault' ) ) {
evt.preventDefault();
}
} );
})
window.onbeforeunload = function () {
return "Are you sure you want to leave?";
};
<p id="display"></p>
<p><a class="withPreventDefault" href="#">Number sign link *with* preventDefault</a></p>
<p><a class="withPreventDefault" href="javascript:void(0);">JavaScript href link *with* preventDefault</a></p>
<p><a href="javascript:void(0);">JavaScript href link *without* preventDefault</a></p>
回答by danial
If the user mouse is on a link and they trigger refresh page with the keyboard or activate a link with the keyboard, the prompt won't show up. So Dr.Molle approach will not work in this rare case.
如果用户鼠标在链接上并且他们使用键盘触发刷新页面或使用键盘激活链接，则不会显示提示。所以 Dr.Molle 方法在这种罕见的情况下不起作用。
