js中的鼠标事件有哪些（用法示例学习进阶）

JS中的鼠标事件是指在浏览器中用户和鼠标交互时，所触发的事件。在前端开发中，这些鼠标事件被广泛应用于各种网站和应用程序中。下面将介绍一些常用的鼠标事件以及它们的用法示例。

鼠标单击事件（click）

鼠标单击事件（click）是指在鼠标左键单击时所触发的事件。在页面中使用最为广泛的是按钮的单击事件。下面是一个示例，当按钮被单击时，将弹出一个提示框。

<button onclick="alert('Hello, world!')">Click me!</button>

除了按钮的单击事件，我们还可以通过JS监听鼠标单击事件并执行相应的操作。例如下面的示例，当页面中的图片被单击时，将修改图片的大小。

<img src="image.jpg" onclick="this.style.width='200px';">

鼠标移动事件（mousemove）

鼠标移动事件（mousemove）是指在鼠标指针在页面中移动时，所触发的事件。鼠标移动事件通常用于跟踪鼠标的位置，并根据其位置来执行特定的操作。

下面的示例展示了如何在页面中跟踪鼠标的位置。当鼠标在页面中移动时，会显示当前鼠标的坐标。

<div onmousemove="showCoords(event)">Move the mouse over this div:</div>

<script>
function showCoords(event) {
  var x = event.clientX;
  var y = event.clientY;
  var coords = "X coords: " + x + ", Y coords: " + y;
  console.log(coords);
}
</script>

鼠标双击事件（dblclick）

鼠标双击事件（dblclick）是指在鼠标左键双击时，所触发的事件。鼠标双击事件通常用于实现单击和双击的功能区分。

下面的示例展示了如何使用双击事件来实现单击和双击的区分。当用户单击按钮时，将显示一条消息。当用户双击按钮时，将触发另一个事件并显示另一条消息。

<button onmousedown="if(event.detail==1){alert('Single click')}else if(event.detail==2){alert('Double click')}">Click me!</button>