Download presentation
Presentation is loading. Please wait.
1
滑鼠移動與按鍵事件 JavaScript 滑鼠移動與按鍵事件
2
滑鼠移動事件 滑鼠在視窗內移來移去，就會產生事件。 稱為 onmousemove 事件
可用下列敘述告訴電腦，當發生 onmousemove 時，要去執行什麼函式去處理這個事件。 document.onmousemove = test; JavaScript 滑鼠移動與按鍵事件
3
滑鼠座標 滑鼠在視窗裡的座標會記錄在 ( event.x , event.y ) 裡。
視窗原點 ( 0, 0 ) 是在左上角。 往右 x 遞增 往下 y 遞增 JavaScript 滑鼠移動與按鍵事件
4
JavaScript 滑鼠移動與按鍵事件
5
純 IE 的版本 <SCRIPT language="JavaScript">
在狀態列顯示滑鼠座標 純 IE 的版本 <SCRIPT language="JavaScript"> document.title = "取得滑鼠座標"; function msCoordinate(){ edX = event.x; //取得編輯區X座標 edY = event.y; //取得編輯區Y座標 window.status = "編輯區座標： x=" + edX + " y=" + edY; } document.onmousemove = msCoordinate; </SCRIPT> JavaScript 滑鼠移動與按鍵事件
6
JavaScript 滑鼠移動與按鍵事件
7
純 IE 的版本 圖片隨著滑鼠跑來跑去 <html> <style type="text/css">
#msPos { position:absolute; left:0px; top:0px; } </style> <SCRIPT language="JavaScript"> document.title = "圖片隨著滑鼠指標移動"; function msCoordinate(){ edX = event.x; //取得編輯區X座標 edY = event.y; //取得編輯區Y座標 document.all["msPos"].style.left = edX + 10; document.all["msPos"].style.top = edY + 16; } document.onmousemove = msCoordinate; </SCRIPT> <body> <img src="企鵝.bmp" id="msPos"> </body> </html> JavaScript 滑鼠移動與按鍵事件
8
滑鼠被按下事件 滑鼠按鍵（左鍵、右鍵）被按下時所產生的事件稱為 onmousedown 事件。
按鍵值會記錄在 event.button 裡。 左鍵：event.button = 1 右鍵：event.button = 2 JavaScript 滑鼠移動與按鍵事件
9
滑鼠被按下事件 可用下列敘述告訴電腦，當發生 onmousedown 時，要去執行什麼函式去處理這個事件。 document.onmousedown = test; 按鍵值會記錄在 event.button 裡。 左鍵：event.button = 1 右鍵：event.button = 2 JavaScript 滑鼠移動與按鍵事件
10
JavaScript 滑鼠移動與按鍵事件
11
純 IE 的版本 顯示滑鼠按鍵情形 <script language="JavaScript">
document.title = "滑鼠按鍵的辨識"; var leftMsg = "按了左鍵"; var rightMsg = "按了右鍵"; var msg = new String(); function msKey(){ btnCode = event.button; if( btnCode == 1 ) msg = leftMsg; if( btnCode == 2 ) msg = rightMsg; document.theForm.showMsg.value = msg; } document.onmousedown = msKey; </script> <body> 請按滑鼠左鍵或右鍵<BR> <form name="theForm"> <input type="text" name="showMsg" size="20"> </form> </body> JavaScript 滑鼠移動與按鍵事件
12
按右鍵的警告 為了防止有心人窺探網頁程式碼，或者不想讓人直接下載網頁圖片，最簡單的第一道防線，就是『按右鍵時，給他出現警告』。
JavaScript 滑鼠移動與按鍵事件
13
純 IE 的版本 按到滑鼠右鍵出現警告 <script language="JavaScript">
document.title = "滑鼠按鍵的辨識"; var leftMsg = "按了左鍵"; var rightMsg = "按了右鍵"; var msg = new String(); function msKey(){ btnCode = event.button; if( btnCode == 1 ) msg = leftMsg; if( btnCode == 2 ) alert("你想幹嘛？！"); document.theForm.showMsg.value = msg; } document.onmousedown = msKey; </script> <body> 請按滑鼠左鍵或右鍵<BR> <form name="theForm"> <input type="text" name="showMsg" size="20"> </form> </body> JavaScript 滑鼠移動與按鍵事件
14
練習 結合『在狀態列顯示滑鼠座標』、『圖片隨著滑鼠跑來跑去』、『按到滑鼠右鍵出現警告』這三個程式。
在視窗裡有個圖片會隨著滑鼠跑來跑去，同時在狀態列顯示滑鼠座標，當按到滑鼠右鍵時出現警告。 圖片不一定要用那隻企鵝。 JavaScript 滑鼠移動與按鍵事件
Similar presentations
