鼠标点击

点击鼠标按键会触发一系列事件。"mousedown"事件和"mouseup"事件类似于"keydown"和"keyup"事件，当鼠标按钮按下或释放时触发。当事件发生时，由鼠标指针下方的 DOM 节点触发事件。

在mouseup事件后，包含鼠标按下与释放的特定节点会触发"click"事件。例如，如果我在一个段落上按下鼠标，移动到另一个段落上释放鼠标，"click"事件会发生在包含这两个段落的元素上。

若两次点击事件触发时机接近，则在第二次点击事件之后，也会触发"dbclick"（双击，double-click）事件。

为了获得鼠标事件触发的精确信息，你可以查看事件中的clientX和clientY属性，包含了事件相对于窗口左上角的坐标（以像素为单位）。或pageX和pageY，它们相对于整个文档的左上角（当窗口被滚动时可能不同）。

下面的代码实现了简单的绘图程序。每次点击文档时，会在鼠标指针下添加一个点。还有一个稍微优化的绘图程序，请参见第 19 章。

  1. <style>
  2.   body {
  3.     height: 200px;
  4.     background: beige;
  5.   }
  6.   .dot {
  7.     height: 8px; width: 8px;
  8.     border-radius: 4px; /* rounds corners */
  9.     background: blue;
  10.     position: absolute;
  11.   }
  12. </style>
  13. <script>
  14.   window.addEventListener("click", event => {
  15.     let dot = document.createElement("div");
  16.     dot.className = "dot";
  17.     dot.style.left = (event.pageX - 4) + "px";
  18.     dot.style.top = (event.pageY - 4) + "px";
  19.     document.body.appendChild(dot);
  20.   });
  21. </script>