onmousedown 事件

onmousedown 事件會發生在當網友按下滑鼠按鍵的時候,這裡指的按鍵不一定是滑鼠左鍵,而是滑鼠上的任何一個按鍵,通常可以安插在網頁的各種元素中,例如圖片 imgDIV 區塊、span 區域、段落、甚至是直接寫在 <body> 標籤內,用來判斷網友是否有用滑鼠點選某些特定的元素,進而觸發特定的 JavaScript function 去執行工作,所有主流的瀏覽器都支援 onmousedown 事件。

onmousedown 事件語法

onmousedown = " 要執行的 JavaScript function "


onmousedown 本身就是滑鼠的 event,用 onmousedown 事件監聽網頁元素,當網友在元素上按下滑鼠的按鍵,onmousedown 就會立即觸發特定的 function 去執行工作,需要注意的是,滑鼠按鍵只要一按就會觸發事件,不需要放開按鍵,function 就已經執行。

onmousedown 事件範例一、在 DIV 區域安插 event
<div onmousedown="alert('Hello')" style="padding:5px;background-color:#FFE5B5;">
請用滑鼠按這裡開始測試
</div>
以上範例輸出
請用滑鼠按這裡開始測試
我們在 DIV 區塊裡寫了『onmousedown="alert('Hello')"』的意思是,當網友在 DIV 區塊內的任何地方按下滑鼠的按鍵,就會觸發 JavaScript 的 alert 語句,效果是跳出對話視窗並顯示 Hello,範例中的 padding 是內距、background-color 則是 DIV 區塊的背景顏色。

onmousedown 事件範例二、在按鈕 button 上安插 event
<input type="button" onmousedown="alert('Hello')" value="測試按鈕">
以上範例輸出
傳統的按鈕(button)預設是當網友按下按鈕並放開按鈕後,才會開始執行動作,若只是按下按鈕沒放開,則不會有所動作,如果設計師在按鈕上加入 onmousedown 的事件,即可做出只要用滑鼠按一下按鈕,就算不放開按鍵,也一樣能觸發特定 JavaScript function 的效果。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012