event.preventDefault() 在 Chrome 和 Opera 中不起作用答案

【问题标题】：event.preventDefault() does not work in Chrome and Operaevent.preventDefault() 在 Chrome 和 Opera 中不起作用
【发布时间】：2013-08-22 19:15:33
【问题描述】：

我正在使用 jQuery Validation Plugin 1.9.0 和 jQuery 1.7.2。

我希望使用 jquery 验证插件验证我的表单。它在 Firefox 20.0.1 和 IE 10 中运行良好。但是在 Chrome (26.0.1410.64 m) 和 Opera (12.14) 中，我无法在表单中单击取消而不阻止验证。

这是我的 javascript 代码：

 submitHandler: function(form) {
  if (this.submitButton.value != 'cancel') {
   $(form).hide();
   $('#load').show();
   $(form).submit();
  }
  else {
  event.preventDefault();
  }
 }

当我在 FF 和 IE 上单击取消时，我会按预期返回我的网页主页，但是当我在 Chrome 和 Opera 中执行此操作时，由于表单未完全填写，我会显示错误消息。在这两种情况下，都会调用 event.preventDefault()，但似乎行为因导航器而异。

您知道可能出了什么问题吗？

感谢您的帮助！

【问题讨论】：

如果你实际上没有在任何地方定义event，你就不能阻止它的默认操作。
事件是在窗口上定义的（因此，调用 event.preventDefault() 就像调用 window.event.preventDefault() - 如果事件尚未在更高的词法范围中定义 - 并且它应该仍然有效）。我认为真正的问题是 OP 不明白 event.preventDefault() 的含义。
显示您的 HTML。否则，我们无法为您提供很好的帮助。
@Adam：该“功能”正在逐步淘汰。并非所有浏览器都支持它，因此不建议您使用window.event。
submitHandler，设置后将阻止提交表单。 preventDefault 在这里不需要，您不在活动中。因此，除非您致电form.submit()，否则不会提交任何内容。

标签： jquery forms jquery-validate

【解决方案1】：

您误解了.preventDefault() 的用途。它不是为了防止函数的默认行为。它旨在取消常规元素的内置行为，即从锚标签中删除导航和历史记录等。

见：http://api.jquery.com/event.preventDefault/

AFAIK，您不能以编程方式打开和关闭验证。使用.validate() 初始化插件后，就无法“取消”初始化它。

但是，要简单地使用“取消”按钮，有几种方法...一种是确保将取消按钮保留在<form></form> 之外，然后使用@987654328 @handler 用它做其他事情。

演示：http://jsfiddle.net/TZVA6/1

或者，正如 Rocket Hazmat 所指出的，另一种方法是为 button 提供一个 type="button" 属性，以防止默认的 submit 操作。

演示：http://jsfiddle.net/TZVA6/2/

【讨论】：

您可以将取消按钮放在<form> 中。只需给它type="button"，否则它默认为“提交”按钮。 jsfiddle.net/TZVA6/2
@RocketHazmat，是的，这绝对是另一种方式。