举例说明js鼠标事件有哪些？

JS鼠标事件有很多，以下是一些常见的例子，并根据其功能进行了大致的分类：

鼠标点击事件:

  • click: 当用户点击鼠标左键时触发。这是最常用的点击事件。
  • dblclick: 当用户双击鼠标左键时触发。
  • mousedown: 当用户按下鼠标按钮（左键、右键或中键）时触发。
  • mouseup: 当用户释放鼠标按钮（左键、右键或中键）时触发。
  • contextmenu: 当用户点击鼠标右键（或在键盘上按下上下文菜单键）时触发。通常用于显示自定义右键菜单，可以通过preventDefault()方法阻止默认的上下文菜单。

鼠标移动事件:

  • mousemove: 当鼠标指针在元素上移动时反复触发。需要注意的是，这个事件触发非常频繁，可能会影响性能，因此应谨慎使用。
  • mouseover: 当鼠标指针从元素外部移入元素内部时触发。
  • mouseout: 当鼠标指针从元素内部移出元素外部时触发。
  • mouseenter: 当鼠标指针进入元素时触发。与mouseover的区别在于，mouseenter不会冒泡。
  • mouseleave: 当鼠标指针离开元素时触发。与mouseout的区别在于，mouseleave不会冒泡。

鼠标滚轮事件:

  • wheel: 当用户滚动鼠标滚轮时触发。可以获取滚轮滚动的方向和距离。
  • DOMMouseScroll (已弃用，仅限Firefox): Firefox旧版本使用的滚轮事件，现在应该使用wheel。

其他鼠标事件:

  • selectstart: 当用户开始选择文本时触发。
  • selectend: 当用户结束选择文本时触发。

一个简单的click事件例子：

<!DOCTYPE html>
<html>
<head>
<title>Click Event Example</title>
</head>
<body>

<button id="myButton">Click me</button>

<script>
const button = document.getElementById("myButton");
button.addEventListener("click", function() {
  alert("Button clicked!");
});
</script>

</body>
</html>

mousemove事件的例子 (注意性能问题):

<!DOCTYPE html>
<html>
<head>
<title>Mousemove Event Example</title>
</head>
<body>

<div id="myDiv" style="width: 200px; height: 200px; background-color: lightblue;"></div>

<script>
const div = document.getElementById("myDiv");
div.addEventListener("mousemove", function(event) {
  console.log("Mouse X: " + event.clientX + ", Mouse Y: " + event.clientY);
});
</script>

</body>
</html>

希望这些例子能帮助你理解JS鼠标事件。 记住，根据你的具体需求选择合适的事件类型，并注意潜在的性能问题。

posted @ 2024-12-04 06:09  王铁柱6  阅读(270)  评论(0)    收藏  举报