码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-04-30 17:50:30      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:

讲述了:鼠标的哪个按键被点击、当前鼠标的光标坐标是多少、被按下键的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鼠标事件、键盘事件实例代码

标签:

原文地址:http://www.cnblogs.com/phpyangbo/p/js-shubiao-jianpan.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!