鼠标移动

每次鼠标移动时都会触发"mousemove"事件。该事件可用于跟踪鼠标位置。当实现某些形式的鼠标拖拽功能时，该事件非常有用。

举一个例子，下面的程序展示一条栏，并设置一个事件处理器，当向左拖动这个栏时，会使其变窄，若向右拖动则变宽。

  1. <p>Drag the bar to change its width:</p>
  2. <div style="background: orange; width: 60px; height: 20px">
  3. </div>
  4. <script>
  5.   let lastX; // Tracks the last observed mouse X position
  6.   let bar = document.querySelector("div");
  7.   bar.addEventListener("mousedown", event => {
  8.     if (event.button == 0) {
  9.       lastX = event.clientX;
  10.       window.addEventListener("mousemove", moved);
  11.       event.preventDefault(); // Prevent selection
  12.     }
  13.   });
  16.   function moved(event) {
  17.     if (event.buttons == 0) {
  18.       window.removeEventListener("mousemove", moved);
  19.     } else {
  20.       let dist = event.clientX - lastX;
  21.       let newWidth = Math.max(10, bar.offsetWidth + dist);
  22.       bar.style.width = newWidth + "px";
  23.       lastX = event.clientX;
  24.     }
  25.   }
  26. </script>

请注意，mousemove处理器注册在窗口对象上。即使鼠标在改变窗口尺寸时在栏外侧移动，只要按住按钮，我们仍然想要更新其大小。

释放鼠标按键时，我们必须停止调整栏的大小。 为此，我们可以使用buttons属性（注意复数形式），它告诉我们当前按下的按键。 当它为零时，没有按下按键。 当按键被按住时，其值是这些按键的代码总和 - 左键代码为 1，右键为 2，中键为 4。 这样，您可以通过获取buttons的剩余值及其代码，来检查是否按下了给定按键。

请注意，这些代码的顺序与button使用的顺序不同，中键位于右键之前。 如前所述，一致性并不是浏览器编程接口的强项。