浏览器默认行为持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第7天，点击查看活动详情许多事件会

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第7天，点击查看活动详情

许多事件会自动触发浏览器执行某些行为。

例如：

点击一个链接 —— 触发导航（navigation）到该 URL。
点击表单的提交按钮 —— 触发提交到服务器的行为。
在文本上按下鼠标按钮并移动 —— 选中文本。

如果我们使用 JavaScript 处理一个事件，那么我们通常不希望发生相应的浏览器行为。而是想要实现其他行为进行替代。

阻止浏览器行为

有两种方式来告诉浏览器我们不希望它执行默认行为：

主流的方式是使用 event 对象。有一个 event.preventDefault() 方法。
如果处理程序是使用 on<event>（而不是 addEventListener）分配的，那返回 false 也同样有效。

在下面这个示例中，点击链接不会触发导航（navigation），浏览器不会执行任何操作：

<a href="/" onclick="return false">Click here</a>
or
<a href="/" onclick="event.preventDefault()">here</a>

在下一个示例中，我们将使用此技术来创建 JavaScript 驱动的菜单。

从处理程序返回 false 是一个例外

事件处理程序返回的值通常会被忽略。

唯一的例外是从使用 on<event> 分配的处理程序中返回的 return false。

在所有其他情况下，return 值都会被忽略。并且，返回 true 没有意义。

示例：菜单

考虑一个网站菜单，如下所示：

<ul id="menu" class="menu">
  <li><a href="/html">HTML</a></li>
  <li><a href="/javascript">JavaScript</a></li>
  <li><a href="/css">CSS</a></li>
</ul>

下面经过 CSS 渲染的外观：

菜单项是通过使用 HTML 链接 <a> 实现的，而不是使用按钮 <button>。这样做有几个原因，例如：

许多人喜欢使用“右键单击” —— “在一个新窗口打开链接”。如果我们使用 <button> 或 <span>，这个效果就无法实现。
搜索引擎在建立索引时遵循 <a href="..."> 链接。

所以我们在标记（markup）中使用了 <a>。但通常我们打算处理 JavaScript 中的点击。因此，我们应该阻止浏览器默认行为。

像这样：

menu.onclick = function(event) {
  if (event.target.nodeName != 'A') return;

  let href = event.target.getAttribute('href');
  alert( href ); // ...可以从服务器加载，UI 生成等

return false; // 阻止浏览器行为（不前往访问 URL）
};

如果我们省略 return false，那么在我们的代码执行完毕后，浏览器将执行它的“默认行为” —— 导航至在 href 中的 URL。

顺便说一句，这里使用事件委托会使我们的菜单更灵活。我们可以添加嵌套列表并使用 CSS 对其进行样式设置来实现 “slide down” 的效果。