JavaScript：对鼠标事件做出反应

鼠标点击任何 DOM 元素都会产生该 click 类型的事件。

鼠标事件属性

        与点击事件有关的 Event 对象有一个 button 属性，让你知道鼠标按钮的使用情况，还有 clientX 和 clientY 属性返回点击发生的位置的水平坐标和垂直坐标。这些坐标是相对于浏览器当前显示的页面区域定义的。

        下面的代码显示了网页上发生的所有点击事件的信息。与时间关联的 mouseInfo() 函数调用一个另一个名为 getMouseButton() 的函数来检索单击的鼠标按钮。

// Return the name of the mouse button
const getMouseButton = code => {
  let button = "unknown";
  switch (code) {
    case 0: // 0 is the code for the left mouse button
      button = "left";
      break;
    case 1: // 1 is the code for the middle mouse button
      button = "middle";
      break;
    case 2: // 2 is the code for the right button
      button = "right";
      break;
  }
  return button;
};

// Show info about mouse event
const mouseInfo = e => {
  console.log(
    `Mouse event: ${e.type}, button: ${getMouseButton(
      e.button
    )}, X: ${e.clientX}, Y: ${e.clientY}`
  );
};

// Add mouse click event listener
document.addEventListener("click", mouseInfo);

输出结果如下：

         类似地，你可以像使用 keydown 和 keyup 一样使用 mousedown 和 mouseup 来处理鼠标按钮的按下和释放事件。下面的代码将相应的处理程序关联到这两个事件。

// Handle mouse button press and release
document.addEventListener("mousedown", mouseInfo);
document.addEventListener("mouseup", mouseInfo);

输出结果如下：

 鼠标相关事件的出现顺序是：mousedown -> mouseup -> click。