js鼠标事件、键盘事件实例代码

浏览数：36 / 时间：2015年06月09日

讲述了：鼠标的哪个按键被点击、当前鼠标的光标坐标是多少、被按下键的unicode码是多少、当前鼠标的光标相对于屏幕的坐标是多少、当前鼠标的光标坐标是多少、shift键是否按下、当前被点击的是哪一个元素

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>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

js鼠标事件、键盘事件实例代码