几个常用的JS鼠标键盘事件例子
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了几个常用的JS鼠标键盘事件例子相关的知识，希望对你有一定的参考价值。
首先普及一下鼠标左右键值的相关方法：
1、event.x 鼠标横轴
2、event.y 鼠标纵轴
3、event.keycode 键盘值
4、events.button==0 默认。没有按任何按钮。
5、events.button==1 鼠标左键
6、events.button==2 鼠标右键
7、events.button==3 鼠标左右键同时按下
8、events.button==4 鼠标中键
9、events.button==5 鼠标左键和中键同时按下
10、events.button==6 鼠标右键和中键同时按下
11、events.button==7 所有三个键都按下
下面列举几个网页上常用的javascript事件的例子，有的我们平时已经再用，主要操作对象是键盘和鼠标，比如判断鼠标哪个按键被点击、鼠标的光标坐标、被按下键的unicode码是多少、当前鼠标的光标相对于屏幕的坐标是多少、shift键是否按下等，下面我们一一来看具体对应的代码：
一、判断当前网页被点击的是哪一个元素：
<html> <head> <meta charset="utf-8" /> <title>被点击的是哪一个元素</title> </head> <body onmousedown="whichElement(event)"> <p>在这里点击看看，这里是p</p> <h3>或者点击这里，这里是h3</h3> <p>你点我吗？？</p> <img src="img/18.jpg" width="300"> <script type="text/javascript"> function whichElement(e) { var targ; // 如果没有传参，默认的事件将会是window.event;那个触发便是那个； if(!e) { var e = window.event; } // 事件具体指向的事件源 if(e.target) { targ = e.target; } else if (e.srcElement) { targ = e.srcElement; } // defeat Safari bug if(targ.nodeType == 3) { targ = targ.parentNode; } var tname = targ.tagName; alert("你点击了 " + tname + "元素") } </script> </body> </html>
二、判断shift键是否按下：
<html> <head> <title>shift键是否按下?</title> <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>
三、判断当前鼠标的光标坐标是多少？
<html> <head> <title>当前鼠标的光标是多少？</title> <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>
四、判断当前鼠标光标相对于屏幕坐标是多少？
<html> <head> <title>鼠标光标相对于屏幕的坐标</title> <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>
五、获取被按下的键盘任意键的unicode码是多少？
<html> <head> <title>获取被按下键的unicode码</title> <script type="text/javascript"> function whichButton(event) { alert(event.keyCode) } </script> </head> <body onkeyup="whichButton(event)"> <p>请按下键盘上的任意键</p> </body> </html>
六、检测获取当前鼠标光标的坐标是多少？
<html> <head> <title>获取鼠标光标坐标</title> <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>
七、判断鼠标的哪个按键被点击？
<html> <head> <title>检测鼠标的哪个按键被点击？</title> <script type="text/javascript"> function whichButton(event) { if(event.button == 2) { alert("你点击了右键!") } else { alert("你点了左键!") } } </script> </head> <body> </body> <html>
以上这些方法差不多可以让我么认识鼠标的一下事件了。
以上是关于几个常用的JS鼠标键盘事件例子的主要内容，如果未能解决你的问题，请参考以下文章