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与CSS复习(三)
Jun 29 Javascript
JS网页播放声音实现代码兼容各种浏览器
Sep 22 Javascript
js如何实现淡入淡出效果
Nov 18 Javascript
学习JavaScript设计模式(单例模式)
Nov 26 Javascript
jQuery 限制输入字符串长度
Jun 20 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
Nov 01 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
Jun 22 Javascript
深入浅析Vue中的 computed 和 watch
Jun 06 Javascript
用react-redux实现react组件之间数据共享的方法
Jun 08 Javascript
TypeScript基础入门教程之三重斜线指令详解
Oct 22 Javascript
AngularJS上传文件的示例代码
Nov 10 Javascript
JS实现鼠标按下拖拽效果
Jul 23 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在DOS命令行下却无法链接MySQL的技术笔记
2010/12/29 PHP
Yii统计不同类型邮箱数量的方法
2016/10/18 PHP
js 蒙版进度条(结合图片)
2010/03/10 Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
2013/03/26 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
js和jquery设置disabled属性为true使按钮失效
2014/08/07 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
浅谈javascript中的call、apply、bind
2016/03/06 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
2016/05/07 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
node.js 利用流实现读写同步,边读边写的方法
2017/09/11 Javascript
简单实现jquery隔行变色
2017/11/09 jQuery
vue+iview+less+echarts实战项目总结
2018/02/22 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
2019/06/03 Javascript
纯js+css实现在线时钟
2020/08/18 Javascript
Python中的多行注释文档编写风格汇总
2016/06/16 Python
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
python读写json文件的简单实现
2017/04/11 Python
Python中元组,列表,字典的区别
2017/05/21 Python
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
Python OOP类中的几种函数或方法总结
2019/02/22 Python
Django admin.py 在修改/添加表单界面显示额外字段的方法
2019/08/22 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
迪卡侬印度官网:购买所有体育用品
2017/06/24 全球购物
英国女鞋购物网站:Moda in Pelle
2019/02/18 全球购物
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
工程造价专业大学生职业规划范文
2014/03/09 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书
单位工作证明范本
2015/06/15 职场文书
呼啸山庄读书笔记
2015/06/29 职场文书
python库sklearn常用操作
2021/08/23 Python