浏览器默认行为

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

这是因为浏览器行为在 mousedown 上被取消。如果我们用另一种方式进行输入，则仍然可以进行聚焦。例如，可以使用 Tab 键从第一个输入切换到第二个输入。但鼠标点击则不行。

处理程序选项 “passive”

addEventListener 的可选项 passive: true 向浏览器发出信号，表明处理程序将不会调用 preventDefault() 。

为什么需要这样做？

移动设备上会发生一些事件，例如 touchmove （当用户在屏幕上移动手指时），默认情况下会导致滚动，但是可以使用处理程序的 preventDefault() 来阻止滚动。

因此，当浏览器检测到此类事件时，它必须首先处理所有处理程序，然后如果没有任何地方调用 preventDefault ，则页面可以继续滚动。但这可能会导致 UI 中不必要的延迟和“抖动”。

passive: true 选项告诉浏览器，处理程序不会取消滚动。然后浏览器立即滚动页面以提供最大程度的流畅体验，并通过某种方式处理事件。

对于某些浏览器（Firefox，Chrome），默认情况下， touchstart 和 touchmove 事件的 passive 为 true 。

event.defaultPrevented

如果默认行为被阻止，那么 event.defaultPrevented 属性为 true ，否则为 false 。

这儿有一个有趣的用例。

你还记得我们在 冒泡和捕获 一章中讨论过的 event.stopPropagation() ，以及为什么停止冒泡是不好的吗？

有时我们可以使用 event.defaultPrevented 来代替，来通知其他事件处理程序，该事件已经被处理。

我们来看一个实际的例子。

默认情况下，浏览器在 contextmenu 事件（单击鼠标右键）时，显示带有标准选项的上下文菜单。我们可以阻止它并显示我们自定义的菜单，就像这样：

<button>Right-click shows browser context menu</button>
<button oncontextmenu="alert('Draw our menu'); return false">
  Right-click shows our context menu
</button>

<p>Right-click here for the document context menu</p>
<button id="elem">Right-click here for the button context menu</button>
<script>
  elem.oncontextmenu = function(event) {
    event.preventDefault();
    alert("Button context menu");
  document.oncontextmenu = function(event) {
    event.preventDefault();
    alert("Document context menu");
</script>

<p>Right-click for the document menu</p>
<button id="elem">Right-click for the button menu (fixed with event.stopPropagation)</button>
<script>
  elem.oncontextmenu = function(event) {
    event.preventDefault();
    event.stopPropagation();
    alert("Button context menu");
  document.oncontextmenu = function(event) {
    event.preventDefault();
    alert("Document context menu");
</script>

<p>Right-click for the document menu (added a check for event.defaultPrevented)</p>
<button id="elem">Right-click for the button menu</button>
<script>
  elem.oncontextmenu = function(event) {
    event.preventDefault();
    alert("Button context menu");
  document.oncontextmenu = function(event) {
    if (event.defaultPrevented) return;
    event.preventDefault();
    alert("Document context menu");
</script>