浏览器默认行为

一起看海

有很多默认的浏览器行为：

mousedown —— 开始选择（移动鼠标进行选择）。
在 <input type="checkbox"> 上的 click —— 选中/取消选中的 input。
submit —— 点击 <input type="submit"> 或者在表单字段中按下 Enter 键会触发该事件，之后浏览器将提交表单。
keydown —— 按下一个按键会导致将字符添加到字段，或者触发其他行为。
contextmenu —— 事件发生在鼠标右键单击时，触发的行为是显示浏览器上下文菜单。
……还有更多……
如果我们只想通过 JavaScript 来处理事件，那么所有默认行为都是可以被阻止的。

想要阻止默认行为 —— 可以使用 event.preventDefault() 或 return false。第二个方法只适用于通过 on<event> 分配的处理程序。

addEventListener 的 passive: true 选项告诉浏览器该行为不会被阻止。这对于某些移动端的事件（像 touchstart 和 touchmove）很有用，用以告诉浏览器在滚动之前不应等待所有处理程序完成。

如果默认行为被阻止，event.defaultPrevented 的值会变成 true，否则为 false。

保持语义，不要滥用
从技术上来说，通过阻止默认行为并添加 JavaScript，我们可以自定义任何元素的行为。例如，我们可以使链接 <a> 像按钮一样工作，而按钮 <button> 也可以像链接那样工作（重定向到另一个 URL 等）。

但我们通常应该保留 HTML 元素的语义。例如 <a> 应该表现为导航（navigation），而不是按钮。

除了“只是一件好事”之外，这还会使你的 HTML 具有更好的可访问性。

另外，如果我们考虑使用带有 <a> 的示例，那么请注意：浏览器允许我们在新窗口中打开此类链接（通过右键单击它们以及其他方式）。大家都喜欢这么做。但是，如果我们使用 JavaScript 让按钮行为表现得像链接，甚至使用 CSS 将其样式设置成看起来也像链接，即使这样，但仍然无法在按钮上使用特定于 <a> 的浏览器功能。