舉例說明js滑鼠事件有哪些？

王铁柱6發表於2024-12-04
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滑鼠事件。 記住，根據你的具體需求選擇合適的事件型別，並注意潛在的效能問題。

相關文章