什么是使用return false而不是e.preventDefault()的实际应用程序,反之亦然?

时间:2011-04-07 14:56:41

标签: javascript jquery

我明白如果我返回false,它实际上是在调用e.preventDefault()e.stopPropagation

我的问题在于决定何时我想继续事件流程而不是完全停止事件流程。我们是否可以列出一些实际情况,我希望使用e.preventDefault()代替return false,反之亦然,为我绘制更清晰的图片?

<击> 修改

<击>

我是一个视觉学习者, 看到 的工作方式,而 <关于它,阅读 ,我是如何理解为什么它的工作原理。我非常感谢任何可以为我发布代码示例的人。

修改

基于@Pointy的回答和评论,我为那些视觉学习者创建了一个工作jsFiddle demo。我认为它总结得非常好。

2 个答案:

答案 0 :(得分:4)

您可能希望在“提交”按钮的“单击”处理程序中使用“preventDefault()”,但不返回false。为什么?因为您可能有一个按钮的“本地”处理程序,可以决定是否继续提交表单。但是,可能有其他处理程序设置了“.delegate()”或“.live()”,根据按钮点击执行其他有趣的事情,所以我希望允许事件冒泡到那些。

编辑 - 非常重要的是要注意,false返回值停止传播(冒泡)和默认行为的约定是jQuery的事情,而不是原生。

编辑更多作为示例,请考虑以下HTML:

<body>
  <form name='foo' action='whatever'>
    <!-- ... -->
    <input type='submit' value='Go' id='mainSubmit'>
  </form>
</body>

现在,如果我想在页面上的任何按钮上发生某​​种奇特的动画,我可能会有一些代码通过“.delegate()”连接起来:

// provide entertaining animation upon button clicks
$('body').delegate('input:submit, input:button, button', 'click', function() {
  $(this).performExcitingAnimation();
});

对于表单中的提交按钮,我可能需要进行表单验证以确定是否可以真正提交表单:

$('#mainSubmit').click(function(e) {
  if ($(this).closest('form').valid()) return true;
  $('#errorBox').text("Uh oh something is wrong");
  e.preventDefault(); // ... instead of return false
});

如果该处理程序使用return false;而不是调用“preventDefault()”方法,则事件不会冒泡到委托处理程序,并且会遗憾地剥夺用户一些令人兴奋的按钮动画。

答案 1 :(得分:1)

我在表单提交中使用return false。有时我会有表格,我需要询问用户是否要继续,如果他们说不,我会返回false来停止事件。这些事件的其他变体基本上都是一样的。你开始一个事件,决定你是否不想继续,并返回false来阻止它。