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

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

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

阻止浏览器行为

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

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

在下面这个示例中,点击链接不会触发导航(navigation),浏览器不会执行任何操作:

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

在下一个示例中,我们将使用此技术来创建 JavaScript 驱动的菜单。
从处理程序返回 false 是一个例外
事件处理程序返回的值通常会被忽略。
唯一的例外是从使用 on 分配的处理程序中返回的 return false。
在所有其他情况下,return 值都会被忽略。并且,返回 true 没有意义。

示例:菜单

考虑一个网站菜单,如下所示:

  1. <ul id="menu" class="menu">
  2. <li><a href="/html">HTML</a></li>
  3. <li><a href="/javascript">JavaScript</a></li>
  4. <li><a href="/css">CSS</a></li>
  5. </ul>

下面经过 CSS 渲染的外观:
image.png
菜单项是通过使用 HTML 链接 实现的,而不是使用按钮