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

编程问答

104_鼠标事件对象

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

生活随笔收集整理的這篇文章主要介紹了 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_鼠标事件对象的全部內容，希望文章能夠幫你解決所遇到的問題。

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