event.preventDefault()与return false

RaYell 2891 javascript jquery event-handling event-propagation dom-events

当我想在某个事件被触发后阻止其他事件处理程序执行时,我可以使用两种技术之一.我将在示例中使用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呢?有什么更好的方法?

karim79.. 2771

return falsejQuery事件处理程序中实际上与调用它们 e.preventDefaulte.stopPropagation传递的jQuery.Event对象相同.

e.preventDefault()将阻止默认事件发生,e.stopPropagation()将阻止事件冒泡return false并将两者兼得.请注意此行为不同于正常(非jQuery的)事件处理程序,其中,值得注意的是,return false没有冒泡停止该事件.

资料来源:John Resig

使用event.preventDefault()而不是"return false"取消href点击有什么好处?

  • 来自DOM2处理程序的`return false`(`addEventListener`)什么都不做(既不会阻止默认也不会停止冒泡;从Microsoft DOM2-ish处理程序(`attachEvent`),它会阻止默认但不冒泡;来自DOM0 handler(`onclick ="return ..."`),它阻止默认(假设你在属性中包含`return`但不冒泡);从jQuery事件处理程序中,它同时执行这两个操作,因为这是一个jQuery的东西. [详细信息和现场测试](http://blog.niftysnippets.org/2011/11/story-on-return-false.html) (119认同)
  • 在这里定义"传播"和"默认"会很有帮助.我一个人让他们感到困惑.它是否正确?**传播**=我的代码(父元素的JavaScript事件处理程序).**默认**=浏览器代码(链接,文本选择等) (10认同)
  • 冒泡的真正含义是什么?例? (5认同)
  • +1注意到`return false`确实_not_停止非jQuery事件处理程序中的事件传播.即`<a href="#" onclick="return false">测试</a>`确实_not_阻止事件冒泡. (5认同)

Jeff Poulton.. 415

根据我的经验,使用event.preventDefault()而不是使用return false时,至少有一个明显的优势.假设您正在捕获锚标记上的click事件,否则如果用户被导航离开当前页面将是一个大问题.如果您的单击处理程序使用return false来阻止浏览器导航,则会打开解释器无法访问return语句并且浏览器将继续执行锚标记的默认行为的可能性.

$('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.
});

  • 虽然这是正确的,但在进行渐进式增强时通常更倾向于相反的行为(我认为这可能是覆盖默认操作的最可能原因) (64认同)

Garrett.. 98

正如你所说的那样,这不是一个"JavaScript"问题; 这是一个关于jQuery设计的问题.

jQuery的和以前链接引用来自约翰Resig的(在karim79的 消息)似乎是如何事件处理程序的一般工作的源误解.

事实:返回false的事件处理程序会阻止该事件的默认操作.它不会阻止事件传播.自从Netscape Navigator诞生以来,事件处理程序一直以这种方式工作.

MDN文档解释return false了事件处理程序的工作原理

jQuery中发生的事情与事件处理程序的情况不同.DOM事件监听器和MSIE"附加"事件完全是另一回事.

有关进一步阅读,请参阅MSDN上的attachEventW3C DOM 2 Events文档.

  • 那么https://developer.mozilla.org/en/DOM/event.preventDefault呢? (7认同)
  • @rds表示"preventDefault不会阻止事件通过DOM进一步传播.应该使用event.stopPropagation." (6认同)
  • 我讨厌google中的每个javascript搜索结果实际上是关于jQuery,+ 1 (6认同)

JAAulde.. 64

通常,您的第一个选项(preventDefault())是可以选择的,但您必须知道您所处的环境以及您的目标是什么.

燃料你的编码有关return false;vs event.preventDefault()vs event.stopPropagation()vsevent.stopImmediatePropagation()的精彩文章.


James Drinka.. 56

使用jQuery时,return false在调用时会执行3个单独的操作:

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

有关更多信息和示例,请参阅jQuery事件:停止(误)使用Return False.


Eldar Djafar.. 40

您可以在onClick一个元素的事件上挂起很多函数.你怎么能确定那false个人将成为最后一个人?preventDefault另一方面肯定只会阻止元素的默认行为.


rahul.. 19

我认为

event.preventDefault()

是w3c指定的取消事件的方式.

您可以在W3C规范中了解事件取消.

此外,您不能在任何情况下使用return false.在href属性中提供javascript函数时,如果返回false,则用户将被重定向到写入了错误字符串的页面.

  • -1; 声称返回false的href将生成一个文字页面,上面写有"false"字样是完全无意义的. (10认同)
  • 不在我见过的任何浏览器中.也许你把它与`<a href ="javascript:return false"或其他什么混淆了? (4认同)

Naga Srinu K.. 14

我认为最好的方法是使用,event.preventDefault()因为如果在处理程序中引发了一些异常,那么false将跳过return 语句,并且行为将与您想要的相反.

但是,如果您确定代码不会触发任何异常,那么您可以使用您希望的任何方法.

如果你仍然想要返回false,那么你可以将整个处理程序代码放在try catch块中,如下所示:

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


归档时间:

查看次数:

809416 次

最近记录:

11 月,3 周 前