JavaScript鼠標事件

時間 2019-11-11

標籤 javascript 鼠標事件欄目 JavaScript 简体版

原文原文鏈接

mousedownjavascript

鼠標被按下。html

mouseupjava

鼠標按鈕被釋放（擡起）。app

clickspa

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

事件觸發順序：mousedown>mouseup>click>dblclickhtm

鼠標左鍵（或中建）被雙擊。對象

事件觸發順序是：mousedown>mouseup>click>mousedown>mouseup>click>dblclick.blog

contextmenuseo

彈出右鍵菜單，他多是鼠標右鍵觸發的，也多是鍵盤的菜單鍵觸發的。

mouseover

鼠標移動到目標上方。

mouseout

鼠標從目標上方移出。

mousemove

鼠標在目標上方移動

注意：事件名稱大小寫敏感。若須要監聽以上事件，則在事件名前面加上on便可。

事件區別

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

onmouseenter、onmouseleave:鼠標移動到自身是會觸發事件，可是移動到其子元素身上不會觸發事件

全局對象事件event

event.x

事件發生時鼠標的位置

event.y

事件發生時鼠標的位置

botton

鼠標的哪個鍵觸發的事件

鼠標左鍵

鼠標中鍵

鼠標右鍵

<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代碼運行結果

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。