javascript - event.preventDefault( ) VS 返回false

  显示原文与译文双语对照的内容

当我想防止其他事件处理程序在触发某个事件后执行,我可以使用两种方法之一。 我将在示例中使用 jQuery,但这也适用于 plain-JS:

1.event.preventDefault()


$('a').click(function (e) {
//custom handling here
 e.preventDefault();
});

2.return false


$('a').click(function () {
//custom handling here
 return false;
});

这两种停止事件传播方法之间有显著差异?

对于我来说,return false; 比执行一个方法更简单,更短,更容易出错。 使用该方法,你必须记住正确的大小写,括号等。

另外,我必须定义回调中的第一个参数,才能调用该方法。 也许我应该避免这样做并使用 preventDefault的原因? 最好的方法是什么?

时间:

在一个jQuery事件处理程序中,return false的实际上与调用 jQuery.Event 对象的e.preventDefaulte.stopPropagation 一样。

e.preventDefault() 将防止发生默认事件,e.stopPropagation() 将阻止事件冒泡,return false 将同时执行。 注意,这种行为不同于正常 ( non-jQuery ) 事件处理程序,其中,值得注意的是, return false不停止泡沫事件。

源:Resig

使用 event.preventDefault() 任何好处"return false"消掉一个href点击?

从我的经验来看,使用 event.preventDefault() 时使用至少有一个明显的优势。 假设你正在捕获一个锚点标记上的click事件,否则如果用户从当前页面导航离开,这将是一个很大的问题。 如果你的点击处理程序使用 return false 来阻止浏览器导航,它将打开解释器不会到达返回语句的可能性,浏览器将继续执行标记行为的默认标记。


$('a').click(function (e) {
//custom handling here

//oops...runtime error...where oh where will the href take me?

 return false;
});

使用 event.preventDefault()的好处是,你可以将它作为处理程序中的第一行添加,从而保证了默认的锚定行为不会激发,不管函数的最后一行是什么( 例如。 运行时错误) 。


$('a').click(function (e) {
 e.preventDefault();

//custom handling here

//oops...runtime error, but at least the user isn't navigated away.
});

通常,你的第一个选项( preventDefault() ) 是要接受的,但是你必须知道你所在的上下文以及你的目标是什么。

燃料你的编码有一个伟大的文章关于 return false; vs event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation()

当你调用 return false 时,将执行 3个独立的操作:

  1. event.preventDefault();
  2. event.stopPropagation();
  3. 停止回拨并在调用时立即返回。

有关更多信息和示例,请参阅 jQuery事件:停止( 管理信息) 使用 return false

你可以在 onClick 事件中为一个元素挂起许多函数。 你怎么能确定 false 是最后一个开火的? 另一方面,preventDefault 绝对会阻止元素的默认行为。

我认为

event.preventDefault()

是用于取消事件的w3c指定的方式。

你可以在事件取消编辑器的W3C规范中阅读。

也不能在每种情况下使用 return false 。 当在href属性中给出一个javascript函数,如果你是 return false,那么用户将被重定向到一个带有错误字符串的页面。

我认为最好的方法是使用 preventDefault,因为如果处理程序中出现了一些异常,那么 return false 语句会被跳过,并且行为会相反,所以使用 event.preventDefault() 方法

但是如果代码不能触发任何异常,那么你可以用你的意愿去处理任何方法。

如果你仍然想使用 return false,那么你可以把你的整个处理程序代码放到下面的catch块中


$('a').click(function (e) {
 try{
 your code here.........
 }
 catch(e){}
 return false;
});

我的经验表明,使用它总是更好


event.preventDefault() 

当我们需要时,实际上要停止或者阻止提交事件,而不是

 
return false

 

event.preventDefault() 工作正常。

...