JQuery : event.preventDefault()

Question

在什么情况下我们会使用JQuery：event.preventDefault(); ...它将在哪里被使用？

- Hitesh Prajapati

---

这篇文章非常值得一读：http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/ - Benbob

Answer 1

当您想要防止默认行为时，例如处理表单提交事件时，如果您想使用Ajax进行提交而不是刷新页面，则可以使用event.preventDefault()。

$('#myform').submit(function(ev) {
    ev.preventDefault();
    // ajax stuff...
});

从您的函数中返回 false 通常会产生相同的效果。

- sje397

---

谢谢回答我的问题，但我还是有点困惑： "return false" 和 ev.preventDefault() 之间有什么区别？所以，我可不可以使用 "false" 来代替 "preventDefault()"... 是吗？我说的对还是不对？ - Hitesh Prajapati

在我看来，event.preventDefault();比return false;更好。如果你使用return false并且出现错误，事件仍然会触发，这通常会使调试变得更加困难（如果你导航到一个新页面，所有的错误信息都会丢失）。 - Mikael Eliasson

Answer 2

function() {
  return false;
}

// IS EQUAL TO

function(e) {
  e.preventDefault();
  e.stopPropagation();
}

另一个非常好的例子是href。

<a href="http://www.sometest.com" class="justtest">
test</a>

以下代码将显示一个警告并将用户带到其默认行为，即href和www.sometst.com。

$('.justtest').submit(function(ev) {
    alert("a href click");
});

如果我使用 event.preventDefault，它只会显示警告并停止其默认行为。它不会将用户带到 www.sometest.com。

$('.justtest').submit(function(ev) {
    alert("a href click");
    event.preventDefault();// this is better 
    // return faslse// return false will kill all the events so try to use preventDefault
});

这段文字来源于SO。

在jQuery事件处理程序中返回false等同于调用e.preventDefault和e.stopPropagation两个方法。

因此，preventDefault只会阻止默认事件的发生，例如点击链接时的页面重定向、表单提交等，而返回false还会停止事件流。

另请参见：

http://css-tricks.com/return-false-and-prevent-default/

- kobe