當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

104_鼠标事件对象

發布時間：2025/5/22 编程问答 18 豆豆

生活随笔收集整理的這篇文章主要介紹了 104_鼠标事件对象小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. 當發生mousedown、mouseup、dblclick、mouseover、mouseenter、mousemove、mouseout和 mouseleave事件時, 它們的執行函數都會傳遞MouseEvent(鼠標事件對象)參數。

2. MouseEvent.ctrlKey事件屬性

2.1.?MouseEvent.ctrlKey指示當事件發生時, Ctrl鍵是否被按下并保持住。可返回一個布爾值, 按下狀態(true), 釋放狀態(false)。它是一個只讀屬性。

3. MouseEvent.altKey事件屬性

3.1.?MouseEvent.altKey指示在指定的事件發生時, Alt鍵是否被按下并保持住了。可返回一個布爾值, 按下狀態(true), 釋放狀態(false)。它是一個只讀屬性。

4. MouseEvent.shiftKey事件屬性

4.1.?MouseEvent.shiftKey指示當事件發生時, "Shift"鍵是否被按下并保持住。可返回一個布爾值, 按下狀態(true), 釋放狀態(false)。它是一個只讀屬性。

5. MouseEvent.metaKey事件屬性

5.1.?MouseEvent.metaKey指示當事件發生時, "meta"鍵是否被按下并保持住。可返回一個布爾值, 按下狀態(true), 釋放狀態(false)。它是一個只讀屬性。

5.2.?"meta"鍵如下圖

6. MouseEvent.clientX事件屬性

6.1.?MouseEvent.clientX返回當事件被觸發時鼠標指針相對于瀏覽器窗口的水平坐標。

7. MouseEvent.clientY事件屬性

7.1.?MouseEvent.clientY返回當事件被觸發時鼠標指針向對于瀏覽器窗口的垂直坐標。

8. MouseEvent.screenX事件屬性

8.1.?MouseEvent.screenX可返回事件發生時鼠標指針相對于屏幕的水平坐標。

9. MouseEvent.screenY事件屬性

9.1.?MouseEvent.screenY可返回事件發生時鼠標指針相對于屏幕的垂直坐標。

10. MouseEvent.button事件屬性

10.1.?MouseEvent.button可返回一個整數, 指示當事件被觸發時哪個鼠標按鍵被點擊。

10.2.?鼠標左鍵對應的值: 0。

10.3.?鼠標中鍵對應的值: 1。

10.4.?鼠標右鍵對應的值: 2。

11. MouseEvent.type事件屬性

11.1.?MouseEvent.type返回一個字符串值, 指示當前觸發的事件類型。

12. MouseEvent.pageX事件屬性

12.1.?MouseEvent.pageX返回當事件被觸發時鼠標指針相對于文檔的水平坐標。

13. MouseEvent.pageY事件屬性

13.1.?MouseEvent.pageY返回當事件被觸發時鼠標指針向對于文檔的垂直坐標。

14. 例子

14.1.?代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>鼠標事件對象(MouseEvent)</title><style type="text/css">div {width: 3000px;height: 300px;background: pink;}</style></head><body><div id="myDiv"></div><script type="text/javascript">function mymousedown(e){ // e是MouseEvent對象console.log('mousedown [ctrlKey: ' + e.ctrlKey + ', altKey: ' + e.altKey + ', shiftKey: ' + e.shiftKey + ', metaKey: ' + e.metaKey+ ', clientX: ' + e.clientX + ', clientY: ' + e.clientY + ', screenX: ' + e.screenX + ', screenY: ' + e.screenY+ ', button: ' + e.button + ', type: ' + e.type + ', pageX: ' + e.pageX + ', pageY: ' + e.pageY + ']');}function mymouseup(e){ // e是MouseEvent對象console.log('mouseup [ctrlKey: ' + e.ctrlKey + ', altKey: ' + e.altKey + ', shiftKey: ' + e.shiftKey + ', metaKey: ' + e.metaKey+ ', clientX: ' + e.clientX + ', clientY: ' + e.clientY+ ', screenX: ' + e.screenX + ', screenY: ' + e.screenY+ ', button: ' + e.button + ', type: ' + e.type + ', pageX: ' + e.pageX + ', pageY: ' + e.pageY + ']');}function mydblclick(e){ // e是MouseEvent對象console.log('dblclick [ctrlKey: ' + e.ctrlKey + ', altKey: ' + e.altKey + ', shiftKey: ' + e.shiftKey + ', metaKey: ' + e.metaKey+ ', clientX: ' + e.clientX + ', clientY: ' + e.clientY + ', screenX: ' + e.screenX + ', screenY: ' + e.screenY+ ', button: ' + e.button + ', type: ' + e.type + ', pageX: ' + e.pageX + ', pageY: ' + e.pageY + ']');}function mymouseover(e){ // e是MouseEvent對象console.log('mouseover [ctrlKey: ' + e.ctrlKey + ', altKey: ' + e.altKey + ', shiftKey: ' + e.shiftKey + ', metaKey: ' + e.metaKey+ ', clientX: ' + e.clientX + ', clientY: ' + e.clientY + ', screenX: ' + e.screenX + ', screenY: ' + e.screenY+ ', button: ' + e.button + ', type: ' + e.type + ', pageX: ' + e.pageX + ', pageY: ' + e.pageY + ']');}function mymouseenter(e){ // e是MouseEvent對象console.log('mouseenter [ctrlKey: ' + e.ctrlKey + ', altKey: ' + e.altKey + ', shiftKey: ' + e.shiftKey + ', metaKey: ' + e.metaKey+ ', clientX: ' + e.clientX + ', clientY: ' + e.clientY+ ', screenX: ' + e.screenX + ', screenY: ' + e.screenY+ ', button: ' + e.button + ', type: ' + e.type + ', pageX: ' + e.pageX + ', pageY: ' + e.pageY + ']');}var move = 0;function mymousemove(e){ // e是MouseEvent對象if(move >= 1) return;move++; console.log('mousemove [ctrlKey: ' + e.ctrlKey + ', altKey: ' + e.altKey + ', shiftKey: ' + e.shiftKey + ', metaKey: ' + e.metaKey+ ', clientX: ' + e.clientX + ', clientY: ' + e.clientY + ', screenX: ' + e.screenX + ', screenY: ' + e.screenY+ ', button: ' + e.button + ', type: ' + e.type + ', pageX: ' + e.pageX + ', pageY: ' + e.pageY + ']');}function mymouseout(e){ // e是MouseEvent對象console.log('mouseout [ctrlKey: ' + e.ctrlKey + ', altKey: ' + e.altKey + ', shiftKey: ' + e.shiftKey + ', metaKey: ' + e.metaKey+ ', clientX: ' + e.clientX + ', clientY: ' + e.clientY+ ', screenX: ' + e.screenX + ', screenY: ' + e.screenY+ ', button: ' + e.button + ', type: ' + e.type + ', pageX: ' + e.pageX + ', pageY: ' + e.pageY + ']');}function mymouseleave(e){ // e是MouseEvent對象console.log('mouseleave [ctrlKey: ' + e.ctrlKey + ', altKey: ' + e.altKey + ', shiftKey: ' + e.shiftKey + ', metaKey: ' + e.metaKey+ ', clientX: ' + e.clientX + ', clientY: ' + e.clientY + ', screenX: ' + e.screenX + ', screenY: ' + e.screenY+ ', button: ' + e.button + ', type: ' + e.type + ', pageX: ' + e.pageX + ', pageY: ' + e.pageY + ']');}var myDiv = document.getElementById('myDiv');myDiv.addEventListener('mousedown', mymousedown);myDiv.addEventListener('mouseup', mymouseup);myDiv.addEventListener('dblclick', mydblclick);myDiv.addEventListener('mouseover', mymouseover);myDiv.addEventListener('mouseenter', mymouseenter);myDiv.addEventListener('mousemove', mymousemove);myDiv.addEventListener('mouseout', mymouseout);myDiv.addEventListener('mouseleave', mymouseleave);</script></body> </html>

14.2.?效果圖

總結

以上是生活随笔為你收集整理的104_鼠标事件对象的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。