Download
1 / 14
140 likes | 272 Views
滑鼠移動與按鍵事件. 滑鼠移動事件. 滑鼠在視窗內移來移去，就會產生事件。 稱為 onmousemove 事件 可用下列敘述告訴電腦，當發生 onmousemove 時，要去執行什麼函式去處理這個事件。 document.onmousemove = test;. 滑鼠座標. 滑鼠在視窗裡的座標會記錄在 ( event.x , event.y ) 裡。 視窗原點 ( 0, 0 ) 是在左上角。 往右 x 遞增 往下 y 遞增. 在狀態列顯示滑鼠座標. 純 IE 的版本. <SCRIPT language="JavaScript">
E N D
滑鼠移動與按鍵事件 滑鼠移動與按鍵事件
滑鼠移動事件 • 滑鼠在視窗內移來移去，就會產生事件。 • 稱為 onmousemove事件 • 可用下列敘述告訴電腦，當發生 onmousemove時，要去執行什麼函式去處理這個事件。document.onmousemove = test; 滑鼠移動與按鍵事件
滑鼠座標 • 滑鼠在視窗裡的座標會記錄在( event.x , event.y ) 裡。 • 視窗原點 ( 0, 0 ) 是在左上角。往右 x 遞增往下 y 遞增 滑鼠移動與按鍵事件
在狀態列顯示滑鼠座標 純 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> 滑鼠移動與按鍵事件
圖片隨著滑鼠跑來跑去 純 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> 滑鼠移動與按鍵事件
滑鼠被按下事件 • 滑鼠按鍵（左鍵、右鍵）被按下時所產生的事件稱為 onmousedown事件。 • 按鍵值會記錄在 event.button裡。 • 左鍵：event.button = 1 • 右鍵：event.button = 2 滑鼠移動與按鍵事件
滑鼠被按下事件 • 可用下列敘述告訴電腦，當發生 onmousedown時，要去執行什麼函式去處理這個事件。document.onmousedown = test; • 按鍵值會記錄在 event.button裡。 • 左鍵：event.button = 1 • 右鍵：event.button = 2 滑鼠移動與按鍵事件
顯示滑鼠按鍵情形 純 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> 滑鼠移動與按鍵事件
按右鍵的警告 • 為了防止有心人窺探網頁程式碼，或者不想讓人直接下載網頁圖片，最簡單的第一道防線，就是『按右鍵時，給他出現警告』。 滑鼠移動與按鍵事件
按到滑鼠右鍵出現警告 純 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> 滑鼠移動與按鍵事件
作業 • 結合『在狀態列顯示滑鼠座標』、『圖片隨著滑鼠跑來跑去』、『按到滑鼠右鍵出現警告』這三個程式。 • 在視窗裡有個圖片會隨著滑鼠跑來跑去，同時在狀態列顯示滑鼠座標，當按到滑鼠右鍵時出現警告。 • 圖片不一定要用那隻企鵝。 滑鼠移動與按鍵事件
