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 拖拉缩放效果
Dec 10 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
Sep 26 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
Feb 19 Javascript
JavaScript中获取样式的原生方法小结
Oct 08 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
Jul 27 Javascript
JavaScript保留关键字汇总
Dec 01 Javascript
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
BootStrap实现文件上传并带有进度条效果
Sep 11 Javascript
vue数据传递--我有特殊的实现技巧
Mar 20 Javascript
三步实现ionic3点击退出app程序
Sep 17 Javascript
Vue实现商品飞入购物车效果(电商项目)
Nov 26 Javascript
基于openlayers实现角度测量功能
Sep 28 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调用Oracle存储过程
2006/10/09 PHP
php中通过curl smtp发送邮件
2012/06/05 PHP
PHP版 汉字转码的实现详解
2013/06/09 PHP
PHP四舍五入精确小数位及取整
2014/01/14 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
鼠标滑过出现预览的大图提示效果
2014/02/26 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
2014/05/07 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
SyntaxHighlighter 3.0.83使用笔记
2015/01/26 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
Javascript技术栈中的四种依赖注入详解
2016/02/23 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
2016/07/12 Javascript
angular实现form验证实例代码
2017/01/17 Javascript
详解JSONObject和JSONArray区别及基本用法
2017/10/25 Javascript
js最简单的双向绑定实例讲解
2018/01/02 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
vue移动端项目缓存问题实践记录
2018/10/29 Javascript
[04:54]DOTA2-DPC中国联赛1月31日Recap集锦
2021/03/11 DOTA
举例讲解Python设计模式编程中对抽象工厂模式的运用
2016/03/02 Python
python中使用psutil查看内存占用的情况
2018/06/11 Python
python实现嵌套列表平铺的两种方法
2018/11/08 Python
python多个模块py文件的数据共享实例
2019/01/11 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
Python 使用 PyMysql、DBUtils 创建连接池提升性能
2019/08/14 Python
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
Johnston & Murphy官网: 约翰斯顿·墨菲牛津总统鞋
2018/01/09 全球购物
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
中学生学习生活的自我评价
2013/10/26 职场文书
销售辞职报告范文
2014/01/12 职场文书
初三物理教学反思
2014/01/21 职场文书
股份转让协议书
2014/04/12 职场文书
个人创业事迹材料
2014/12/30 职场文书
明星邀请函
2015/02/02 职场文书
圣诞晚会主持词
2015/07/01 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书
mybatis 解决从列名到属性名的自动映射失败问题
2021/06/30 Java/Android