這篇文章主要介紹了js滑鼠按鍵事件和鍵盤按鍵事件用法,結合實例形式總結分析了JavaScript針對滑鼠與鍵盤事件的常用操作技巧,需要的朋友可以參考下
本文實例講述了js滑鼠按鍵事件和鍵盤按鍵事件用法。分享給大家供大家參考,具體如下:
keydown,keyup,keypress:屬於你的鍵盤按鍵
mousedown,mouseup:屬於你的滑鼠按鍵
#當按鈕被按下時,發生keydown 事件,
keyup是在使用者將按鍵抬起的時候才會觸發的,
完整的key press 過程分為兩個部分:1. 按鍵被按下;2. 按鍵被放開。
當使用者在這個元素上按下滑鼠鍵的時候,發生mousedown
當使用者在這個元素上放開滑鼠鍵的時候,發生mouseup
範例
1. 滑鼠的哪個按鍵被點選
<html> <head> <script type="text/javascript"> function whichButton(event) { if (event.button==2) { alert("你点击了鼠标右键!") } else { alert("你点击了鼠标左键!") } } </script> </head> <body onmousedown="whichButton(event)"> <p>请单击你鼠标的左键或右键试试</p> </body> </html>
2. 目前滑鼠的遊標座標是多少
<html> <head> <script type="text/javascript"> function show_coords(event) { x=event.clientX y=event.clientY alert("X 坐标: " + x + ", Y 坐标: " + y) } </script> </head> <body onmousedown="show_coords(event)"> <p>在此文档中按下你鼠标的左键看看!</p> </body> </html>
#3. 被按鍵的unicode碼是多少
<html> <head> <script type="text/javascript"> function whichButton(event) { alert(event.keyCode) } </script> </head> <body onkeyup="whichButton(event)"> <p>在此文档中按下你键盘上的某个键看看</p> </body> </html>
4. 目前滑鼠的遊標相對於螢幕的座標是多少
<html> <head> <script type="text/javascript"> function coordinates(event) { x=event.screenX y=event.screenY alert("X=" + x + " Y=" + y) } </script> </head> <body onmousedown="coordinates(event)"> <p> 点击你鼠标的左键 </p> </body> </html>
#5. 目前滑鼠的遊標座標是多少
<html> <head> <script type="text/javascript"> function coordinates(event) { x=event.x y=event.y alert("X=" + x + " Y=" + y) } </script> </head> <body onmousedown="coordinates(event)"> <p> 点击你鼠标的左键 </p> </body> </html>
6. shift鍵是否按下
<html> <head> <script type="text/javascript"> function isKeyPressed(event) { if (event.shiftKey==1) { alert("shit键按下了!") } else { alert("shit键没有按下!") } } </script> </head> <body onmousedown="isKeyPressed(event)"> <p>按下shit键,点击你鼠标的左键</p> </body> </html>
7. 目前被點擊的是哪一個元素
<html> <head> <script type="text/javascript"> function whichElement(e) { var targ if (!e) var e = window.event if (e.target) targ = e.target else if (e.srcElement) targ = e.srcElement if (targ.nodeType == 3) // defeat Safari bug targ = targ.parentNode var tname tname=targ.tagName alert("你点击了 " + tname + "元素") } </script> </head> <body onmousedown="whichElement(event)"> <p>在这里点击看看,这里是p</p> <h3>或者点击这里也可以呀,这里是h3</h3> <p>你想点我吗??</p> <img border="0" src="../myCode/btn.gif" width="100" height="26" alt="pic"> </body> </html>
以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!
相關推薦:
以上是關於js滑鼠按鍵事件和鍵盤按鍵事件的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!