#08: preventDefault、stopPropagation 和 return false

在上一个视频中我们简要地提到了：当点击一个哈希链接时，如何阻止浏览器跳转到页面下方？这是浏览器的默认行为，幸运的是，我们可以使用 JavaScript 告诉浏览器不要这样做。

处理这个问题最直接的方法如下

$("a").on("click", function(event) {
  
  event.preventDefault();

});

你会看到这些链接不会像你想象的那样跳转到页面下方

查看 Chris Coyier 在 CodePen 上的示例 a5aeaa4890837ac172605983324d5470 (@chriscoyier)

当然，使用时要小心。这会阻止哈希链接跳转到页面下方，但也阻止普通链接跳转到新的 URL。因此，仅在您明确知道需要在自己的 JavaScript 中处理的锚链接上使用它。您可以缩小范围，例如 $("a[href^='#']")。例如，“链接的 href 属性以哈希开头”。

但通常您也会看到这样写

$("a").on("click", function() {
  
  return false;

});

它实现了相同的功能。这里发生的事情是 return false; 实际上做了两件事。它执行了 event.preventDefault();，并且还执行了另一件事：event.stopPropagation();

如果您愿意，可以使用 return false;，您只需要了解 stopPropagation 的作用，并接受它也会执行该操作。我通常认为最好不要使用 stopPropagation，除非您明确知道需要这样做。它的作用是停止 DOM 事件的“冒泡”。例如，如果您的 DOM 如下所示

<nav role='navigation'>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

然后您准确地点击“首页”这个词，点击事件将触发锚链接上的事件，然后它会冒泡到列表项，再冒泡到无序列表，然后到导航元素，一直冒泡到文档本身。

当您使用 stopPropagation 时，它将在您运行该事件的任何元素上停止冒泡。请注意这一点！

我在这篇文章中更详细地介绍了这种差异 这里。

在视频的结尾，我谈到了如何通过 preventDefault 来阻止元素上的滚动。我完全错误地认为可以这样做。碰巧的是，这是少数几个无法以这种方式停止的事件之一。有一些方法可以阻止它，例如使用 CSS（overflow: hidden; – 这可能很奇怪）– 或 使用更复杂的方法。