
首先普及一下鼠标左右键值的相关方法:
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="">
<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 == ) {
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>
以上这些方法差不多可以让我么认识鼠标的一下事件了。