首先普及一下鼠標左右鍵值的相關方法：
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>
以上這些方法差不多可以讓我么認識鼠標的一下事件了。