怎樣監測網頁中按鈕的滑鼠單擊事件

2020-10-12 21:09:45

滑鼠單擊事件是最常見的事件之一，當用戶單擊滑鼠時，同時 onClick 指定的事件處理程式或程式碼將被呼叫執行。本節範例給出了按鈕的滑鼠單擊事件響應提示資訊。本節程式碼主要使用了 onmousedown 事件和 event.button 屬性，主要功能和用法如下。

工具/材料

瀏覽器　＋　Adobe Dreamweaver

01

當在頁面中按下滑鼠按鍵時，onmousedown 事件會被觸發。該事件可以呼叫相應的函數，作為其事件處理常式：在函數中，可以是任意合法的 JavaScript 程式碼。
02

event.button 屬性表示滑鼠按鍵。取值為 1 時表示滑鼠左鍵，取值為2時表示滑鼠右鍵。可以使用「event.button == 1」或「event.button == 2」來判斷滑鼠的哪個按鍵被按下。
03

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>按鈕的滑鼠單擊事件</title>
<script language="javascript">
function click() //函數:判斷滑鼠按鍵，並作出相應的響應
{
if(event.button == 1) //如果按下滑鼠左鍵
{
alert('你按下了滑鼠左鍵!'); //顯示提示資訊
}
if(event.button == 2) //如果按下滑鼠右鍵
{
alert('你按下了滑鼠右鍵!'); //顯示提示資訊
}
}
//通過onmousedown事件呼叫click()函數
document.onmousedown = click;
</script>
</head>
<body>
<center>
<h1>按鈕的滑鼠單擊事件</h1>
<hr>
<br>
<h5>請在頁面上單擊滑鼠左鍵或右鍵...</h5>
</center>
</body>
</html>
04

執行該程式後，頁面出現一個提示資訊，當按下滑鼠左鍵後，彈出一個對話方塊，如下圖所示。關閉該對話方塊，當按下滑鼠右鍵時，彈出另一個對話方塊，如下圖所示。
End

各瀏覽（IE、Firefox、谷歌瀏覽器）的不同實現