如何防止IE中的javascript:href链接触发window.onbeforeunload?

如何防止IE中的javascript:href链接触发window.onbeforeunload?,javascript,jquery,internet-explorer,onbeforeunload,onunload,Javascript,Jquery,Internet Explorer,Onbeforeunload,Onunload,我正在为我的表单构建一个故障保护,它将警告用户,如果他们离开页面,他们的表单数据将丢失(类似于gmail所做的) 上述功能在firefox中非常有效,但在IE中它是由任何href链接触发的,即使是指向javascript而不是其他页面的链接 例如 <a href='javascript:someFunction();'>click</a> 我想知道是否有任何方法可以绕过这个问题,因为我不想让用户在仅仅单击页面上的按钮时认为他们正在离开页面我没有重写所有各种链接的选项

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

上述功能在firefox中非常有效,但在IE中它是由任何href链接触发的,即使是指向javascript而不是其他页面的链接

例如

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

我想知道是否有任何方法可以绕过这个问题,因为我不想让用户在仅仅单击页面上的按钮时认为他们正在离开页面我没有重写所有各种链接的选项,因为它们是内置的且数量众多


有什么想法吗?

将任何脚本移动到
事件处理程序,改为单击
事件处理程序,为没有JavaScript的用户提供一个后备页面:

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


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

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

  }
);

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

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

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

如果用户鼠标位于链接上,并且他们使用键盘触发刷新页面或使用键盘激活链接,则不会显示提示。所以Molle博士的方法在这种罕见的情况下不起作用。

如果在标记的href中包含书签符号,您应该仍然能够使用onclick事件来包含JavaScript

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

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

(与其他一些答案一样,这需要更改JavaScript的绑定方式。如果这不适用于您,请忽略。)

我发现在IE7到IE10中,只需使用jQuery.click()和
preventDefault
就可以工作,而不显示
onbeforeunload
消息(对于我的任何测试用例,IE11都不显示
beforeunload
消息)。无论href是“#”还是
javascript:void(0)
,都是如此。如果直接使用
attachEvent
/
addEventListener
,我希望结论成立,但我没有对此进行测试

有一个演示下面在。带有
preventDefault
的两个版本(绿色)都有效(不显示
beforeunload
对话框)。没有
preventDefault
的一个会显示它(作为比较)




不要使用这样的链接。改用不引人注目的Javascript。这不是一个选项。我们正在使用一个高度复杂的系统,它已经内置了所有这些东西。我不想在这种情况下重新发明轮子。你能在页面加载后更改链接吗?“不要离开!”是独裁的。您最好警告“如果您离开,未保存的数据将丢失”。如果用户想要离开,无论您如何尝试,用户都会离开。你越是滥用策略,就会有越多的浏览器和用户忽略它们。这仍然会触发onbeforeunload事件。另外,我没有重写链接的特权。感谢您的更新,但这不会阻止onbeforeunload事件触发。@Maxx:只要
someFunction()它就不会触发
beforeunload
事件
不会抛出错误:
返回false
会看到这一点。我正在考虑这样做。我想我会尝试一下,如果它看起来有效的话,我会处理好几个小时的回归测试。谢谢你,我最终选择了这个解决方案。它按预期工作,对于这种解决方法来说相当可靠。谢谢你的帮助。这很有效。然而,你也可以简单地在你绑定到锚标签的函数中返回false——至少这是我能够解决这个问题的方法。简单地返回false似乎并不能解决IE上的问题。我不得不求助于使用onhover技巧,这就是魔鬼!除非政府类型强迫我,否则我只使用Chrome/Firefox。使用IE的少数“好处”似乎对提高工作效率没有多大帮助。不幸的是,我相信这仍然会触发呼叫。我有一个“提交”按钮,所以我不能这样做。对我来说很有用,很好而且很简单。注意,这个版本将适用于所有链接。
<a href="#" onclick='someFunction();'>click</a>
$( 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>