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 相关文章推荐
js实现点击注册按钮开始读秒倒计时的小例子
May 11 Javascript
js兼容的placeholder属性详解
Aug 18 Javascript
jquery模拟SELECT下拉框取值效果
Oct 23 Javascript
jQuery提交多个表单的小技巧
Jul 27 Javascript
jquery.mobile 共同布局遇到的问题小结
Feb 10 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 Javascript
Bootstrap 手风琴菜单的实现代码
Jan 20 Javascript
package.json文件配置详解
Jun 15 Javascript
JavaScript取得gridview中获取checkbox选中的值
Jul 24 Javascript
javaScript实现复选框全选反选事件详解
Nov 20 Javascript
基于three.js编写的一个项目类示例代码
Jan 05 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
Feb 27 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
php daddslashes()和 saddslashes()有哪些区别分析
2012/10/26 PHP
Zend Framework动作助手Json用法实例分析
2016/03/05 PHP
RGB颜色值转HTML十六进制(HEX)代码的JS函数
2009/04/25 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
2013/02/02 Javascript
jquery操作checkbox示例分享
2014/07/21 Javascript
DOM基础教程之模型中的模型节点
2015/01/19 Javascript
node-http-proxy修改响应结果实例代码
2016/06/06 Javascript
bootstrapValidator表单验证插件学习
2016/12/30 Javascript
js实现带缓动动画的导航栏效果
2017/01/16 Javascript
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
canvas压缩图片转换成base64格式输出文件流
2017/03/09 Javascript
详解使用angular的HttpClient搭配rxjs
2017/09/01 Javascript
Node做中转服务器转发接口
2017/10/18 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
2018/05/30 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
2018/12/09 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
2019/09/21 Javascript
详解node登录接口之密码错误限制次数(含代码)
2019/10/25 Javascript
vue+elementui 对话框取消 表单验证重置示例
2019/10/29 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
python的id()函数介绍
2013/02/10 Python
python使用cookielib库示例分享
2014/03/03 Python
Python判断文件或文件夹是否存在的三种方法
2017/07/27 Python
python遍历一个目录,输出所有的文件名的实例
2018/04/23 Python
python cv2截取不规则区域图片实例
2019/12/21 Python
Python 图片处理库exifread详解
2021/02/25 Python
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
世界上最好的足球商店:Unisport
2019/03/02 全球购物
董事长秘书岗位职责
2013/11/29 职场文书
金融管理应届生求职信
2014/02/20 职场文书
新闻专业毕业生英文求职信
2014/03/19 职场文书
八荣八耻演讲稿
2014/09/15 职场文书
土木工程专业本科生求职信
2014/10/01 职场文书
医院消毒隔离制度
2015/08/05 职场文书
四年级数学教学反思
2016/02/16 职场文书
SQL Server中搜索特定的对象
2022/05/25 SQL Server