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


Posted in Javascript onOctober 03, 2016

本文实例讲述了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>

PS:这里再为大家提供一个关于JS事件的在线工具,归纳总结了JS常用的事件类型与函数功能:

javascript事件与功能说明大全:

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

Javascript 相关文章推荐
可实现多表单提交的javascript函数
Aug 01 Javascript
IE浏览器打印的页眉页脚设置解决方法
Dec 08 Javascript
jQuery.getScript加载同域JS的代码
Feb 13 Javascript
javascript中有趣的反柯里化深入分析
Dec 05 Javascript
超链接的禁用属性Disabled使用示例
Jul 31 Javascript
jQuery中prevAll()方法用法实例
Jan 08 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
Oct 17 Javascript
js鼠标点击图片切换效果实现代码
Nov 19 Javascript
AngularJS入门教程之双向绑定详解
Aug 18 Javascript
vue脚手架vue-cli的学习使用教程
Jun 06 Javascript
vue使用xe-utils函数库的具体方法
Mar 06 Javascript
vue中接口域名配置为全局变量的实现方法
Sep 20 Javascript
JavaScript对象创建模式实例汇总
Oct 03 #Javascript
js实现的光标位置工具函数示例
Oct 03 #Javascript
js获取腾讯视频ID的方法
Oct 03 #Javascript
关于js二维数组和多维数组的定义声明(详解)
Oct 02 #Javascript
微信小程序 navigation API实例详解
Oct 02 #Javascript
微信小程序 获取设备信息 API实例详解
Oct 02 #Javascript
微信小程序 location API实例详解
Oct 02 #Javascript
You might like
基于magic_quotes_gpc与magic_quotes_runtime的区别与使用介绍
2013/04/22 PHP
用 Composer构建自己的 PHP 框架之设计 MVC
2014/10/30 PHP
tp5(thinkPHP5)操作mongoDB数据库的方法
2018/01/20 PHP
Laravel模型间关系设置分表的方法示例
2018/04/21 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
基于jquery的滑动样例代码
2010/11/20 Javascript
js函数的引用, 关于内存的开销
2012/09/17 Javascript
js实现进度条的方法
2015/02/13 Javascript
JavaScript类继承及实例化的方法
2015/07/25 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
2018/03/02 Javascript
基于iview的router常用控制方式
2019/05/30 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
简单了解常用的JavaScript 库
2020/07/16 Javascript
[48:46]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第二场 11.19
2020/11/19 DOTA
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
Pycharm更换python解释器的方法
2018/10/29 Python
[原创]Python入门教程4. 元组基本操作
2018/10/31 Python
python pygame实现2048游戏
2018/11/20 Python
解决python3中的requests解析中文页面出现乱码问题
2019/04/19 Python
Python自动化完成tb喵币任务的操作方法
2019/10/30 Python
python保存log日志,实现用log日志画图
2019/12/24 Python
Django 用户认证Auth组件的使用
2020/11/30 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
使用canvas实现黑客帝国数字雨效果
2020/01/02 HTML / CSS
物流专业大学应届生求职信
2013/11/03 职场文书
医学检验专业大学生求职信
2013/11/18 职场文书
大学辅导员事迹材料
2014/02/05 职场文书
2015年教师节感恩寄语
2015/03/23 职场文书
2015年学校总务工作总结
2015/07/20 职场文书
七年级之开学家长寄语35句
2019/09/05 职场文书
Nginx静态压缩和代码压缩提高访问速度详解
2022/05/30 Servers
python语言中pandas字符串分割str.split()函数
2022/08/05 Python