源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2022-12-12 13:54 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:js鼠标按键事件和键盘按键事件用法实例汇总
本文实例讲述了js鼠标按键事件和键盘按键事件用法。分享给大家供大家参考,具体如下: keydown,keyup,keypress:属于你的键盘按键 mousedown,mouseup:属于你的鼠标按键 当按钮被按下时,发生 keydown 事件, keyup是在用户将按键抬起的时候才会触发的, 完整的 key press 过程分为两个部分:1. 按键被按下;2. 按键被松开。 当用户在这个元素上按下鼠标键的时候,发生mousedown 当用户在这个元素上松开鼠标键的时候,发生mouseup 例子 [b]1. 鼠标的哪个按键被点击[/b]
<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>

[b]2. 当前鼠标的光标坐标是多少[/b]
<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>

[b]3. 被按下键的unicode码是多少[/b]
<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
alert(event.keyCode)
}
</script>
</head>
<body onkeyup="whichButton(event)">
<p>在此文档中按下你键盘上的某个键看看</p>
</body>
</html>

[b]4. 当前鼠标的光标相对于屏幕的坐标是多少[/b]
<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>

[b]5. 当前鼠标的光标坐标是多少[/b]
<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>

[b]6. shift键是否按下[/b]
<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>

[b]7. 当前被点击的是哪一个元素[/b]
<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>

[b]PS:这里再为大家提供一个关于JS事件的在线工具,归纳总结了JS常用的事件类型与函数功能:[/b] [b]javascript事件与功能说明大全:[/b] [url=http://tools.jb51.net/table/javascript_event]http://tools.jb51.net/table/javascript_event[/url] 更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《[url=http://www.1sucai.cn/Special/833.htm]JavaScript窗口操作与技巧汇总[/url]》、《[url=http://www.1sucai.cn/Special/313.htm]JavaScript中json操作技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/502.htm]JavaScript切换特效与技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/472.htm]JavaScript查找算法技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/462.htm]JavaScript动画特效与技巧汇总[/url]》、《[url=http://www.1sucai.cn/Special/439.htm]JavaScript错误与调试技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/297.htm]JavaScript数据结构与算法技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/281.htm]JavaScript遍历算法与技巧总结[/url]》及《[url=http://www.1sucai.cn/Special/119.htm]JavaScript数学运算用法总结[/url]》 希望本文所述对大家JavaScript程序设计有所帮助。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部