event.preventDefault()在Chrome和Opera中无法正常工作

Question

我正在使用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()，但似乎行为取决于浏览器。你有什么想法可能出了什么问题吗？谢谢你的帮助！

- user2708647

---

如果您实际上没有定义“event”，那么就无法阻止它的默认行为。 - DevlshOne

展示你的HTML代码。否则，我们无法提供很好的帮助。 - Sparky

@Adam：那个“特性”正在逐步淘汰。并非所有浏览器都支持它，因此不建议使用window.event。 - gen_Eric

当设置submitHandler时，将防止表单被提交。这里不需要使用preventDefault，因为你不在一个事件中。所以，除非你调用form.submit()，否则不会提交任何内容。 - gen_Eric

你的“取消”按钮应该做什么？ - gen_Eric

Answer 1

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

参见：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/

- Sparky

---

你可以将取消按钮放在<form>标签内。只需将其设置为type="button"，否则它将默认为“提交”按钮。http://jsfiddle.net/TZVA6/2/ - gen_Eric

@RocketHazmat，是的，那绝对是另一种方法。 - Sparky