jquery - event.preventDefault() 在 Chrome 和 Opera 中不起作用

Question

我正在使用 jQuery 验证插件 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()，但根据导航器的不同，行为似乎有所不同。

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

感谢您的帮助!

Answer 1

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

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

据我所知，您无法以编程方式打开和关闭验证。使用 .validate() 初始化插件后，没有方法可以“取消”初始化它。

但是，要简单地使用“取消”按钮，有多种方法...其中之一是确保将取消按钮保留在 <form></form> 的外部。然后使用 click处理程序用它做其他事情。

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

或者，正如 Rocket Hazmat 所指出的，另一种方法是给出 button一个type="button"防止默认 submit 的属性行动。

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