104_鼠标事件对象
1. 當(dāng)發(fā)生mousedown、mouseup、dblclick、mouseover、mouseenter、mousemove、mouseout和 mouseleave事件時(shí), 它們的執(zhí)行函數(shù)都會(huì)傳遞MouseEvent(鼠標(biāo)事件對(duì)象)參數(shù)。
2. MouseEvent.ctrlKey事件屬性
2.1.?MouseEvent.ctrlKey指示當(dāng)事件發(fā)生時(shí), Ctrl鍵是否被按下并保持住。可返回一個(gè)布爾值, 按下狀態(tài)(true), 釋放狀態(tài)(false)。它是一個(gè)只讀屬性。
3. MouseEvent.altKey事件屬性
3.1.?MouseEvent.altKey指示在指定的事件發(fā)生時(shí), Alt鍵是否被按下并保持住了。可返回一個(gè)布爾值, 按下狀態(tài)(true), 釋放狀態(tài)(false)。它是一個(gè)只讀屬性。
4. MouseEvent.shiftKey事件屬性
4.1.?MouseEvent.shiftKey指示當(dāng)事件發(fā)生時(shí), "Shift"鍵是否被按下并保持住。可返回一個(gè)布爾值, 按下狀態(tài)(true), 釋放狀態(tài)(false)。它是一個(gè)只讀屬性。
5. MouseEvent.metaKey事件屬性
5.1.?MouseEvent.metaKey指示當(dāng)事件發(fā)生時(shí), "meta"鍵是否被按下并保持住。可返回一個(gè)布爾值, 按下狀態(tài)(true), 釋放狀態(tài)(false)。它是一個(gè)只讀屬性。
5.2.?"meta"鍵如下圖
6. MouseEvent.clientX事件屬性
6.1.?MouseEvent.clientX返回當(dāng)事件被觸發(fā)時(shí)鼠標(biāo)指針相對(duì)于瀏覽器窗口的水平坐標(biāo)。
7. MouseEvent.clientY事件屬性
7.1.?MouseEvent.clientY返回當(dāng)事件被觸發(fā)時(shí)鼠標(biāo)指針向?qū)τ跒g覽器窗口的垂直坐標(biāo)。
8. MouseEvent.screenX事件屬性
8.1.?MouseEvent.screenX可返回事件發(fā)生時(shí)鼠標(biāo)指針相對(duì)于屏幕的水平坐標(biāo)。
9. MouseEvent.screenY事件屬性
9.1.?MouseEvent.screenY可返回事件發(fā)生時(shí)鼠標(biāo)指針相對(duì)于屏幕的垂直坐標(biāo)。
10. MouseEvent.button事件屬性
10.1.?MouseEvent.button可返回一個(gè)整數(shù), 指示當(dāng)事件被觸發(fā)時(shí)哪個(gè)鼠標(biāo)按鍵被點(diǎn)擊。
10.2.?鼠標(biāo)左鍵對(duì)應(yīng)的值: 0。
10.3.?鼠標(biāo)中鍵對(duì)應(yīng)的值: 1。
10.4.?鼠標(biāo)右鍵對(duì)應(yīng)的值: 2。
11. MouseEvent.type事件屬性
11.1.?MouseEvent.type返回一個(gè)字符串值, 指示當(dāng)前觸發(fā)的事件類型。
12. MouseEvent.pageX事件屬性
12.1.?MouseEvent.pageX返回當(dāng)事件被觸發(fā)時(shí)鼠標(biāo)指針相對(duì)于文檔的水平坐標(biāo)。
13. MouseEvent.pageY事件屬性
13.1.?MouseEvent.pageY返回當(dāng)事件被觸發(fā)時(shí)鼠標(biāo)指針向?qū)τ谖臋n的垂直坐標(biāo)。
14. 例子
14.1.?代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>鼠標(biāo)事件對(duì)象(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對(duì)象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對(duì)象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對(duì)象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對(duì)象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對(duì)象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對(duì)象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對(duì)象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對(duì)象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.?效果圖
總結(jié)
以上是生活随笔為你收集整理的104_鼠标事件对象的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 103_剪贴板事件
- 下一篇： 105_键盘事件对象