首页 > 开发 > JS > 正文

js鼠标按键事件和键盘按键事件用法实例汇总

2024-05-06 16:32:15
字体:
来源:转载
供稿:网友

本文实例讲述了js鼠标按键事件和键盘按键事件用法。分享给大家供大家参考,具体如下:

keydown,keyup,keypress:属于你的键盘按键

mousedown,mouseup:属于你的鼠标按键

当按钮被按下时,发生 keydown 事件,

keyup是在用户将按键抬起的时候才会触发的,

完整的 key press 过程分为两个部分:1. 按键被按下;2. 按键被松开。

当用户在这个元素上按下鼠标键的时候,发生mousedown

当用户在这个元素上松开鼠标键的时候,发生mouseup

例子

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.clientXy=event.clientYalert("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.screenXy=event.screenYalert("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.xy=event.yalert("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 targif (!e) var e = window.eventif (e.target) targ = e.targetelse if (e.srcElement) targ = e.srcElementif (targ.nodeType == 3) // defeat Safari bugtarg = targ.parentNodevar tnametname=targ.tagNamealert("你点击了 " + 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>

希望本文所述对大家JavaScript程序设计有所帮助。


注:相关教程知识阅读请移步到JavaScript/Ajax教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表