javascript 即使在 onclick="return false;" 之后，IE 仍会跟踪链接

IE Follows Link Even After onclick="return false;"

提问by Xavier Holt

I'm writing a Rails 2.3.8 app, and using the standard link_tohelper. I have a reasonable number of links that user methods other than GET, so I pass a :method => :whateveroption to link_to, and it generates a link with an onclick handler like so (indentation added for readability):

我正在编写一个 Rails 2.3.8 应用程序，并使用标准link_to帮助程序。我有合理数量的用户方法而不是 GET 的链接，所以我将一个:method => :whatever选项传递给link_to，它会生成一个带有 onclick 处理程序的链接，如下所示（为了可读性而添加了缩进）：

<a
  onclick="
    var f = document.createElement('form');
    f.style.display = 'none';
    this.parentNode.appendChild(f);
    f.method = 'POST';
    f.action = this.href;
    var s = document.createElement('input');
    s.setAttribute('type', 'hidden');
    s.setAttribute('name', 'authenticity_token');
    s.setAttribute('value', '31M3q8SJkRz7f0R80l42Z2W7O2N7ZrzufhWQYql/Zd8=');
    f.appendChild(s);
    f.submit();
    return false;"
  href="/transactions/1015/transcribe"
>
Enter Data
</a>

Now, for whatever reason, IE (both 7 & 8 - the two I've tested) has decided that the return false;at the end there isn't enough to stop it from following the link, and I end up getting two requests to my server: The POST request from the onclick handler, which I want, and the GET request from the link itself, which I don't. In fact, that route doesn't exist for anything other than a POST request, so when the browser follows the GET request, the user gets dumped on a 'Bad URL' error screen. Not good.

现在，无论出于何种原因，IE（7 和 8 - 我测试过的两个）已经决定return false;最后没有足够的东西来阻止它跟随链接，我最终收到了两个对我的服务器的请求：来自 onclick 处理程序的 POST 请求，我想要，以及来自链接本身的 GET 请求，我不想要。事实上，除了 POST 请求之外，该路由不存在任何其他内容，因此当浏览器遵循 GET 请求时，用户会被转储到“错误 URL”错误屏幕上。不好。

Has anyone seen this before, and can tell me what's causing it? Or, better yet, does anyone know a good workaround?

有没有人以前见过这个，可以告诉我是什么原因造成的？或者，更好的是，有人知道一个好的解决方法吗？

PS:I'd prefer NOTto

PS：我宁愿不来

1. Monkey-patch link-to, or
2. Write my own version of link_to

1. 猴子补丁link-to，或
2. 写我自己的版本 link_to

but if that's what it takes, that's what it takes. And I'm using jQuery 1.5.something, if that helps.

但如果这就是它所需要的，那就是它所需要的。我正在使用 jQuery 1.5.something，如果有帮助的话。

采纳答案by Chris Rogers

To prevent form submission in JQuery, we often use

为了防止 JQuery 中的表单提交，我们经常使用

event.preventDefault();

So in your example, you could use this (as discussed in comments) :

因此，在您的示例中，您可以使用它（如评论中所述）：

$('a[onclick]').click(function(e) {e.preventDefault();});

Hope that helps!

希望有帮助！

回答by aroth

In general, when IE decides to "ignore" a return false;from an onclickhandler, it is because one of the lines before the return false;threw an exception. This will cause a silent failure of the onclickhandler, and the browser will then attempt to access the hreflink. This applies to all browsers, not just IE, but it's often the case that IE will throw exceptions in cases where other browsers will not, hence why it seems that only IE is ignoring the return false;.

在一般情况下，当IE决定“忽略”一个return false;从onclick处理器，这是因为之前的线路之一return false;抛出异常。这将导致onclick处理程序静默失败，然后浏览器将尝试访问该href链接。这适用于所有浏览器，不仅仅是 IE，但通常情况下 IE 会在其他浏览器不会抛出异常的情况下抛出异常，因此为什么似乎只有 IE 忽略return false;.

One quick patch for this is to set href="#", which will keep the browser on the page even if the onclickhandler fails. The proper way to debug it, however, is to wrap your onclickcode in something like try { ... } catch (ex) { alert(ex); }to see what the exception is, and then fix the onclickcode so that it no longer throws the exception.

对此的一个快速补丁是 set href="#"，即使onclick处理程序失败，它也会使浏览器保持在页面上。然而，调试它的正确方法是将您的onclick代码包装在类似于try { ... } catch (ex) { alert(ex); }查看异常是什么的东西中，然后修复onclick代码使其不再抛出异常。

回答by Jeff Gran

I have had this problem with IE before, and found that a solution that works (which I believe is what jQuery's event.preventDefault() does under the covers), is to do BOTH return false;for normal browsers, but also event.returnValue = false;(before the actual return, obviously) for IE. IE will respect that.

我之前在 IE 上遇到过这个问题，并发现一个有效的解决方案（我相信这是 jQuery 的 event.preventDefault() 在幕后所做的），是return false;为普通浏览器做两个，而且event.returnValue = false;（在实际之前return，显然) 为 IE。IE 会尊重这一点。

Unfortunately though, I don't know how to slip that into the link_to helper without hacking it. That's actually what I came here looking for. :)

不幸的是，我不知道如何在不破解它的情况下将它放入 link_to 助手中。这实际上就是我来这里寻找的。:)

回答by fl00r

I believe that the problem that you are submiting your new form:

我相信您提交新表格的问题：

f.submit();

and you are submiting it right to your link href

并且您将其提交到您的链接 href

f.action = this.href;

so you are folowing to this address. Your link returns false, but submited form leads you to this location.

所以你正在关注这个地址。您的链接返回 false，但提交的表单会将您引导至此位置。

So your link_tois ok. Problem is inside of your strange javascript.

所以你link_to的没问题。问题出在你奇怪的 javascript 里面。