JavaScript常見鼠標事件與用法分析

更新時間：2019年01月03日 14:22:21 作者：司馬懿字仲達

這篇文章主要介紹了JavaScript常見鼠標事件與用法,結(jié)合實例形式較為詳細的分析了javascript 8種常見的鼠標事件與相關使用技巧,需要的朋友可以參考下

本文實例講述了JavaScript常見鼠標事件與用法。分享給大家供大家參考，具體如下：

JavaScript 鼠標事件有以下8種

mousedown
鼠標的鍵鈕被按下。

mouseup
鼠標的鍵鈕釋放彈起。

click
鼠標左鍵（或中鍵）被單擊。

事件觸發(fā)順序是：mousedown -> mouseup -> click

dblclick
鼠標左鍵（或中鍵）被雙擊。

事件觸發(fā)順序是：mousedown -> mouseup -> click -> mousedown -> mouseup -> click -> dblclick。

contextmenu
彈出右鍵菜單，它可能是鼠標右鍵觸發(fā)的，也可能是鍵盤的菜單鍵觸發(fā)的。

mouseover
鼠標移動到目標上方。

mouseout
鼠標從目標上方移出。

mousemove
鼠標在目標上方移動

注意：事件名稱大小寫敏感。若需要監(jiān)聽以上事件，則在事件名的前面加個on即可。

事件區(qū)別

onmouseover、nmouseout：鼠標移動到自身時候會觸發(fā)事件，同時移動到其子元素身上也會觸發(fā)事件

onmouseenter、onmouseleave：鼠標移動到自身是會觸發(fā)事件，但是移動到其子元素身上不會觸發(fā)事件

全局事件對象event

event.x
事件發(fā)生時鼠標的位置

event.y
事件發(fā)生時鼠標的位置

button
鼠標的哪一個鍵觸發(fā)的事件

0
鼠標左鍵
1
鼠標中鍵
2
鼠標右鍵

代碼范例

<html>
  <body>
    <script type="text/javascript">
      function appendText(str) {
        document.body.innerHTML += str + "<br/>";
      }
      document.onmousedown = function() {
        appendText("onmousedown");
        appendText("button = " + event.button);
        appendText("(x,y) = " + event.x + "," + event.y);
      }
      document.onmouseup = function() {
        appendText("onmouseup");
      }
      document.onclick = function() {
        appendText("onclick");
      }
      document.ondblclick = function() {
        appendText("ondblclick");
      }
      document.oncontextmenu = function() {
        appendText("oncontextmenu");
      }
      document.onmouseover = function() {
        appendText("onmouseover");
      }
      document.onmouseout = function() {
        appendText("onmouseout");
      }
      document.onmousemove = function() {
        appendText("mousemove");
      }
    </script>
  </body>
</html>

這里使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼，得到如下運行結(jié)果：