28

我正在为我的表单构建一个故障保险，它将警告用户如果他们离开页面，他们的表单数据将丢失（类似于 gmail 所做的）。

window.onbeforeunload = function () {    
        if (formIsDirty) {
            return "You have unsaved data on this form. Don't leave!";
        }
}

上面的函数在 Firefox 中效果很好，但在 IE 中它是由任何 href 链接触发的，即使是指向 javascript 而不是其他页面的链接。

例如....

<a href='javascript:someFunction();'>click</a>

我想知道是否有任何方法可以解决这个问题，因为我不希望用户认为当他们只是点击一个按钮时他们正在离开页面。我没有重写所有各种链接的选项，因为它们是内置的并且数量众多。

有任何想法吗？

4

6 回答 6

37

悬停这些链接时，您可以删除并重新分配 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');}
            );

  }
);
于 2011-10-04T17:34:19.767 回答
8

我刚刚遇到了类似的问题，并找到了一个非常简单的解决方案：

$("a").mousedown(function() {
    $(window).unbind();
});

这将在触发点击事件之前删除 onbeforeunload 事件。

于 2013-03-03T19:11:02.973 回答
3

将任何脚本移至click事件处理程序，并为没有 JavaScript 的用户提供后备页面：

<a href="foo.html" onclick="someFunction(); return false">click</a>

不显眼的 JS 拥护者可能会反对使用该onclick属性，但事实是它确实有效，它是添加事件处理程序的最简单方法，也是提供示例的最简单方法。为了更好地分离关注点，您可以改用 DOM0onclick属性，addEventListener()/attachEvent()或库。

于 2011-10-04T15:15:11.557 回答
1

如果您在 a 标签的 href 中包含书签符号，您应该仍然可以使用 onclick 事件来包含您的 JavaScript。

<a href="#" onclick='someFunction();'>click</a>

我已经运行了许多测试，这似乎可以在不触发 onbeforeunload 事件的情况下执行 JavaScript。我很想知道这是否适用于其他人，或者在以这种方式实现标签后您是否仍然遇到同样的问题。

于 2013-06-21T13:58:52.213 回答
1

（与其他一些答案一样，这需要更改 JavaScript 的绑定方式。如果这对您不起作用，请忽略。）

我发现在 IE 7 到 IE 10 中，只需使用 jQuery .click()preventDefault即可工作而不显示onbeforeunload消息（IE 11 不会显示beforeunload我的任何测试用例的消息）。无论 href 是 '#' 还是javascript:void(0). attachEvent如果/addEventListener直接使用，我希望结论成立，但我没有对此进行测试。

在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>
于 2014-06-12T21:55:02.533 回答
0

如果用户鼠标在链接上并且他们使用键盘触发刷新页面或使用键盘激活链接，则不会出现提示。因此，在这种罕见的情况下，Dr.Molle 方法将不起作用。

于 2013-04-11T17:46:47.460 回答