jQuery的event.preventDefault()在Firefox中无效（包括JSFiddle）

Question

这是一种类似的重复问题，但我认为在这种情况下我正确地使用了event.preventDefault()。

这里有一个JSFiddle，您可以在其中查看代码: http://jsfiddle.net/SeEw2/2/

基本上，单击提交按钮。

在Chrome中：没有任何反应-正确的响应。

在Firefox中: 页面重新加载，糟糕！

那么为什么Firefox会重新加载页面而Chrome不会呢？ 我一直在使用Firebug进行调试，但两者都没有出现错误......

- Jack

---

这段代码能在 Chrome 上工作的原因是，Chrome 为那些依赖于 IE 的网站提供了帮助，通过在触发处理程序之前使用当前事件来填充 window.event。（而像你的 event 这样的免费参考——因为你忘记将其包含在事件处理程序签名中，正如 ClemDesm 最先指出的那样 ——意味着你退回到了 window.event。）Firefox 不会为 IE 特定的代码提供任何帮助。 - T.J. Crowder

非常有用的信息，谢谢T.J. - 我以前从未知道过。 - Jack

请在问题中发布代码，而不是在jsFiddle中。 - Tim Down

Answer 1

您的代码中变量event没有被初始化。 http://jsfiddle.net/SeEw2/4/

提取：

 $('#ajaxsearch').click(function(event) {

        // Stop the Search input reloading the page by preventing its default action
        event.preventDefault();

- Shikiryu

---

啊哈！谢谢ClemDesm，错过那个真是太傻了。现在它似乎直接显示在Firebug的错误控制台中... 嗯 :) - Jack

我不知道为什么它在Chrome中能正常工作...我遇到了完全相同的问题，但这样解决了它。 - Landon Poch

@Shikiryu -- 你救了我，我也一直在使用function(e)并且忽略了它，非常感谢！ - Ambuj

这个答案怎么会对我有帮助呢？或者我之前是这样想的。然后我看了看我的代码... 另外，最新版本的FF（66.0.2）不再存在此问题，并且像Chrome一样忽略此问题，但60.x.x仍然存在。 - cdonner

Answer 2

啊，我过去也遇到过类似的问题。与其使用 event.preventDefault() ，不妨尝试将事件传递给：

    function ie8SafePreventEvent(e){
    if(e.preventDefault){ e.preventDefault()}
    else{e.stop()};

    e.returnValue = false;
    e.stopPropagation();        
}

我知道它说的是IE，但是我从来没有遇到过问题 =]

（注：该句话是指作者从未遇到在使用IE浏览器时出现的问题）

- Dartoxian

Answer 3

不要寻找提交按钮的点击事件，为什么不使用$(form).submit处理程序呢？只要在处理程序的末尾加上'return false'，页面就不会重新加载。

- CamelBlues

---

这就是我现在正在使用的，看起来是更好的方法。谢谢！ - Jack

我之前也用的是这个，但是用'submit'时Firefox一直在提交表单。我不得不改成'click'才行。 - Ajowi

Answer 4

因为你没有像 function(event) 这样传递事件对象，但我的问题是为什么要这样做呢？当你可以使用 type="button" 并通过 onclick 传递值时，为什么要经过所有这些步骤呢？本质上，这就是你使用整个过程所做的事情。

- Babiker

---

嘿，为什么我没有想到呢？干杯！我现在使用的是 type="button"。虽然我没有使用 onclick，但从更大的范围来看，这样做更方便。 - Jack

我可能错了（这与问题无关），但我想知道：type="button" 是否会将 enter 键盘触摸识别为提交？无法在 jsfiddle 上进行真正的测试，也无法在我的工作中以其他方式进行测试，我很好奇 :) - Shikiryu

当您在文本框上按Enter键时，它不会生效。但是，当您将焦点（可能是Tab）放在按钮本身上并按Enter键时，它会将其识别为提交，并触发preventDefault()。这是您的意思吗？ :) - Jack

好的，为了让“Enter”键既能在文本输入框中使用，也能在提交按钮上使用，我给<form>标签分配了id #ajaxsearch，然后运行了$('#ajaxsearch').submit([...] - 这样两者都可以工作。 - Jack

@Jack：是的，我认为它不太用户友好。一个“普通”的人不会专注于按钮，然后按下回车键来提交表单。那么，我很想知道一个按钮和一个.submit()处理程序是否可行。在这种情况下，它似乎是更好的解决方案（form中没有action（顺便问一下，你为什么还要使用form ;)？）无论如何，如果JS被禁用，这里就没有后备方案了。 - Shikiryu

Answer 5

我是这样解决的，由于我的代码略有不同，这可能对其他人有所帮助。我的初始代码如下。

<form id="enrollstudentform" onsubmit="return enrollStudents()">
    ...
</form>

我的js函数看起来像这样

function enrollStudents() {
    // Stop Form.
    event.preventDefault();
    // Other code
}

我必须在函数调用中传递参数事件并在函数中接收它。

<form id="enrollstudentform" onsubmit="return enrollStudents(event)">
    ...
</form>

js code:

function enrollStudents(event) {
    // Stop Form.
    event.preventDefault();
    // Other code
}

希望它有所帮助。

- Andres Ramos

---

这看起来像是Shikiryu 5年前给出的相同答案... - cdonner