這篇文章主要介紹了JavaScript常見鼠標事件與用法,結合實例形式較爲詳細的分析了javascript 8種常見的鼠標事件與相關使用技巧,需要的朋友可以參考下
本文實例講述了JavaScript常見鼠標事件與用法。分享給大家供大家參考，具體如下：
JavaScript 鼠標事件有以下8種
mousedown
鼠標的鍵鈕被按下。
mouseup
鼠標的鍵鈕釋放彈起。
click
鼠標左鍵（或中鍵）被單擊。
事件觸發順序是：mousedown -> mouseup -> click
dblclick
鼠標左鍵（或中鍵）被雙擊。
事件觸發順序是：mousedown -> mouseup -> click -> mousedown -> mouseup -> click -> dblclick。
contextmenu
彈出右鍵菜單，它可能是鼠標右鍵觸發的，也可能是鍵盤的菜單鍵觸發的。
mouseover
鼠標移動到目標上方。
mouseout
鼠標從目標上方移出。
mousemove
鼠標在目標上方移動
注意：事件名稱大小寫敏感。若需要監聽以上事件，則在事件名的前面加個on即可。
事件區別
onmouseover、nmouseout：鼠標移動到自身時候會觸發事件，同時移動到其子元素身上也會觸發事件
onmouseenter、onmouseleave：鼠標移動到自身是會觸發事件，但是移動到其子元素身上不會觸發事件
全局事件對象event
event.x
事件發生時鼠標的位置
event.y
事件發生時鼠標的位置
button
鼠標的哪一個鍵觸發的事件
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測試上述代碼，得到如下運行結果：
感興趣的朋友可以使用本站在線工具測試一下上述代碼運行效果。
更多關於JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。