JavaScript常見鼠標(biāo)事件與用法分析

發(fā)布時(shí)間：2020-08-24 05:51:25 來源：腳本之家閱讀：125 作者：司馬懿字仲達(dá) 欄目：web開發(fā)

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

JavaScript 鼠標(biāo)事件有以下8種

mousedown
鼠標(biāo)的鍵鈕被按下。

mouseup
鼠標(biāo)的鍵鈕釋放彈起。

click
鼠標(biāo)左鍵（或中鍵）被單擊。

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

dblclick
鼠標(biāo)左鍵（或中鍵）被雙擊。

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

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

mouseover
鼠標(biāo)移動(dòng)到目標(biāo)上方。

mouseout
鼠標(biāo)從目標(biāo)上方移出。

mousemove
鼠標(biāo)在目標(biāo)上方移動(dòng)

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

事件區(qū)別

onmouseover、nmouseout：鼠標(biāo)移動(dòng)到自身時(shí)候會(huì)觸發(fā)事件，同時(shí)移動(dòng)到其子元素身上也會(huì)觸發(fā)事件

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

全局事件對(duì)象event

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

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

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

0
鼠標(biāo)左鍵
1
鼠標(biāo)中鍵
2
鼠標(biāo)右鍵

代碼范例

<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代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼，得到如下運(yùn)行結(jié)果：

JavaScript常見鼠標(biāo)事件與用法分析

感興趣的朋友可以使用本站在線工具測(cè)試一下上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

向AI問一下細(xì)節(jié)

JavaScript常見鼠標(biāo)事件與用法分析

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽