js鼠标按键事件和键盘按键事件用法实例汇总

最新推荐文章于 2022-08-31 12:21:59 发布

小丫007

最新推荐文章于 2022-08-31 12:21:59 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/xiaoya_syt/article/details/69951398

版权

 
 本文实例讲述了js鼠标按键事件和键盘按键事件用法。分享给大家供大家参考，具体如下：
 keydown,keyup，keypress：属于你的键盘按键
 mousedown,mouseup：属于你的鼠标按键
 当按钮被按下时，发生 keydown 事件,
 keyup是在用户将按键抬起的时候才会触发的,
 完整的 key press 过程分为两个部分：1. 按键被按下；2. 按键被松开。
 当用户在这个元素上按下鼠标键的时候，发生mousedown
 当用户在这个元素上松开鼠标键的时候，发生mouseup
 1. 鼠标的哪个按键被点击
 <html>
 <head>
 <script type="text/javascript">
 function show_coords(event)
 {
 x=event.clientX
 y=event.clientY
 alert("X 坐标： " + x + ", Y 坐标： " + y)
 }
 </script>
 </head>
 <body οnmοusedοwn="show_coords(event)">
 <p>在此文档中按下你鼠标的左键看看！</p>
 </body>
 </html>
 2. 当前鼠标的光标坐标是多少
 <html>
 <head>
 <script type="text/javascript">
 functionshow_coords(event)
 {
 x=event.clientX
 y=event.clientY
 alert("X 坐标： " + x + ", Y 坐标： " + y)
 }
 </script>
 </head>
 <body οnmοusedοwn="show_coords(event)">
 <p>在此文档中按下你鼠标的左键看看！</p>
 </body>
 </html>
 
 
 
 
 3. 被按下键的unicode码是多少
 <html>
 <head>
 <script type="text/javascript">
 function whichButton(event)
 {
 alert(event.keyCode)
 }
 </script>
 </head>
 <body οnkeyup="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 οnmοusedοwn="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 οnmοusedοwn="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 οnmοusedοwn="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 οnmοusedοwn="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> 
 
  

小丫007

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js鼠标按键事件和键盘按键事件用法实例汇总

本文实例讲述了js鼠标按键事件和键盘按键事件用法。分享给大家供大家参考，具体如下：keydown,keyup，keypress：属于你的键盘按键mousedown,mouseup：属于你的鼠标按键当按钮被按下时，发生 keydown 事件,keyup是在用户将按键抬起的时候才会触发的,完整的 key press 过程分为两个部分：1. 按键被按下；2. 按键被松开。当用户在
复制链接

扫一扫