javascript - 过度使用 jQuery 的 preventDefault() 和 stopPropagation()

Question

我最近在与一位同事讨论我们编码实践中的一些差异时，我提出了一个关于他在事件处理程序中过度使用上述两种方法的问题。具体来说，它们都看起来像这样......

$('span.whatever').on('click', function(e) {

    e.preventDefault();
    e.stopPropagation();

    /* do things */

});

他声称这是一个很好的做法，没有可预见的反作用力，并将改进跨平台支持，同时减少 future 出现的意外问题。

我想问你们:如果他是对的，为什么 jQuery 团队没有实现这种全局应用于所有事件处理程序的行为？实际上，我的假设是他错了，因为这些方法可以独立使用，但谁知道呢……非常感谢您的见解。

--

更新:我做了一个简单的速度测试，这两个函数造成了一点拖延，但没有什么特别明显的。尽管如此，我认为这是慎重使用它们的一个很好的理由。

$('span.whatever').on('click', function(e) {

    var start = new Date();

    for (i = 0; i < 999999; i++) {
        e.preventDefault();
        e.stopPropagation();
    }

    console.log( new Date() - start );

});

上面的记录是 ~9.5 秒，当我将函数调用从循环中取出时是 ~2.5 秒。

Answer 1

我做的事情和你的同事不一样(在每个事件处理程序上推送 2 个调用)，但我确实有同样的做法，明确地使用这些调用而不是“return false;”，我相信让我的生活更轻松。

当我开始使用 Jquery 时，我想如果我需要同时停止传播和防止默认，我应该只“返回 false”，我在所有地方都这样做了。

$('a.whatever').on('click', function(e) {

    do_stuff();

    return false;
}); 

但是我最终遇到了两个问题:

• 如果 do_stuff() 有任何导致异常的严重错误，“return false；”永远达不到!!!错误最终会被jquery“很好地”吞没；您的事件将冒泡，并让浏览器执行默认操作。如果您在单页应用中点击了一个链接，就您所知，该页面已导航离开，并且整个应用状态都消失了(我以前遇到过这种情况)。

• 我对返回 false 过于宽容:在许多情况下，我只需要一个 preventdefault()。 “return false”会终止事件冒泡，有时会阻碍我在 dom 层次结构的更高层执行另一个操作的能力(或者使我使用的其他一些插件/库无法正常工作)

所以我现在更喜欢直截了当。我几乎从不使用“return false;”任何更多。如果我有一个必须不传播或不执行默认的事件处理程序，我故意将它放在我的函数 FIRST 中，在任何处理代码之前。无论在事件处理期间发生什么，都不应不影响我不希望默认操作运行和/或事件不冒泡的事实。

是的，话虽这么说，但我也注意到在需要时只使用 2 个中的一个(或者在某些情况下根本不使用)。我不会无缘无故地同时添加 preventDefault() 和 stopPropagation() 。我在处理程序中操纵事件的任何地方，都是有意识的逐案决策的一部分。