js鼠标按键事件和键盘按键事件用法实例汇总
作者：kp12345 时间：2024-04-17 10:04:29
本文实例讲述了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.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>
希望本文所述对大家JavaScript程序设计有所帮助。
标签：js,鼠标,键盘,事件
0
投稿猜你喜欢
IE8将是IE的最后一个版本？
2009-03-12 12:44:00
python语音信号处理详细教程
2022-02-23 11:19:37
全面阐述overflow:hidden属性
2008-08-18 13:30:00
Python中将字典转换为XML以及相关的命名空间解析
2022-07-22 20:05:03
Vue 项目中遇到的跨域问题及解决方法(后台php)
2023-11-16 09:14:13
Python 使用with上下文实现计时功能
2022-08-20 02:43:21
python如何生成密码字典
2021-12-23 23:08:24
python3环境搭建过程(利用Anaconda+pycharm)完整版
2022-01-16 06:04:47
Django返回json数据用法示例
2022-05-25 21:00:52
python检测某个变量是否有定义的方法
2021-05-17 18:45:01
YOLOV5代码详解之损失函数的计算
2022-06-09 02:01:58
Python将字符串常量转化为变量方法总结
2023-07-14 00:36:58
golang网络通信超时设置方式
2024-05-09 09:39:27
mysql 如何使用JSON_EXTRACT() 取json值
2024-01-16 04:26:46
带你熟练掌握Vue3之Pinia状态管理
2024-05-28 15:52:44
Webpack中的文件指纹的实现
2024-04-10 11:00:17
MySql表、字段、库的字符集修改及查看方法
2024-01-19 19:39:38
实例讲解启动mysql server失败的解决方法
2008-12-26 17:27:00
云原生使用Docker部署mysql数据库的详细过程
2024-01-20 15:57:24
tensorflow 中对数组元素的操作方法
2022-01-22 11:35:37
