首頁 > 開發者 > JavaScript
標籤：
滑鼠事件是 Web 上面最常用的一類事件，畢竟滑鼠還是最主要的定位裝置。那麼通過事件對象可以擷取到滑鼠按鍵資訊和螢幕座標擷取等。
一、滑鼠按鍵
只有在主要滑鼠按鍵被單擊時(常規一般是滑鼠左鍵)才會觸發 click 事件，因此檢測按鈕的資訊並不是必要的。
但對於 mousedown 和 mouseup 事件來說，則在其 event 對象存在一個 button 屬性，表示按下或釋放按鈕。
<script type="text/javascript"> window.onload = function(){ document.onclick = function (evt) { var e = evt || window.event; //實現跨瀏覽器安全色擷取 event 對象 alert(e.button); }; };</script></head><body> <input type="button" value="按鈕"/></body>
在絕大部分情況下，我們最多隻使用主次中三個單擊鍵，IE 給出的其他按鍵組合一般無法使用上。所以，我們只需要做上這三種相容即可。
<script type="text/javascript"> function getButton(evt) { //跨瀏覽器左中按右鍵相應 var e = evt || window.event; if (evt) { //Chrome 瀏覽器支援 W3C 和 IE return e.button; //要注意判斷順序 } else if (window.event) { switch(e.button) { case 1 : return 0; case 4 : return 1; case 2 : return 2; } } } window.onload = function(){ document.onmouseup = function(evt){ //調用 if(getButton(evt) == 0) { alert(‘按下了左鍵！‘); }else if(getButton(evt) == 1){ alert(‘按下了中鍵！‘); }else if(getButton(evt) == 2){ alert(‘按下了右鍵！‘ ); } }; };</script>
二、可視區及螢幕座標
事件對象提供了兩組來擷取瀏覽器座標的屬性，一組是頁面可視區左邊，另一組是螢幕座標。
<script type="text/javascript"> window.onload = function(){ document.onclick = function (evt) { var e = evt || window.event; alert(e.clientX + ‘,‘ + e.clientY); alert(e.screenX + ‘,‘ + e.screenY); }; };</script></head><body> <input type="button" value="按鈕"/></body>
三、修改鍵
有時，我們需要通過鍵盤上的某些鍵來配合滑鼠來觸發一些特殊的事件。
這些鍵為：Shfit、Ctrl、Alt 和 Meat(Windows 中就是 Windows 鍵，蘋果機中是 Cmd 鍵)，它們經常被用來修改滑鼠事件和行為，所以叫修改鍵。（結合滑鼠）
<script type="text/javascript"> function getKey(evt) { var e = evt || window.event; var keys = []; if (e.shiftKey){ keys.push(‘shift‘); //給數組添加元素 } if (e.ctrlKey){ keys.push(‘ctrl‘); } if (e.altKey){ keys.push(‘alt‘); } return keys; } window.onload = function(){ document.onclick = function (evt) { alert(getKey(evt)); }; };</script>
JavaScript的事件對象_滑鼠事件
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
