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代码
Nov 09 Javascript
纯js实现的论坛常用的运行代码的效果
Jul 15 Javascript
Span元素的width属性无效果原因及解决方案
Jan 15 Javascript
JavaScript 类似flash效果的立体图片浏览器
Feb 08 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
Apr 24 Javascript
JavaScript中的全局对象介绍
Jan 01 Javascript
js省市联动效果完整实例代码
Dec 09 Javascript
Jquery easyui开启行编辑模式增删改操作
Jan 14 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
Oct 26 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
Dec 04 Javascript
js前端图片加载异常兜底方案
Jun 21 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
9段PHP实用功能的代码推荐
2014/10/14 PHP
PHP list() 将数组中的值赋给变量的简单实例
2016/06/13 PHP
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
jQuery 源码分析笔记(2) 变量列表
2011/05/28 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
JS从一组数据中找到指定的单条数据的方法
2016/06/02 Javascript
AngularJS基础 ng-paste 指令简单示例
2016/08/02 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
vue-router实现webApp切换页面动画效果代码
2017/05/25 Javascript
ES6新特性:使用export和import实现模块化详解
2017/07/31 Javascript
js禁止浏览器页面后退功能的实例(推荐)
2017/09/01 Javascript
React 组件间的通信示例
2018/06/14 Javascript
vue 中 beforeRouteEnter 死循环的问题
2019/04/23 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
2019/06/24 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
2020/11/27 Vue.js
Python中将字典转换为XML以及相关的命名空间解析
2015/10/15 Python
Java多线程编程中ThreadLocal类的用法及深入
2016/06/21 Python
python中的协程深入理解
2019/06/10 Python
Python如何实现动态数组
2019/11/02 Python
详解Python实现进度条的4种方式
2020/01/15 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
Pytorch 使用 nii数据做输入数据的操作
2020/05/26 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
Python pymsql模块的使用
2020/09/07 Python
HTML5 Video/Audio播放本地文件示例介绍
2013/11/18 HTML / CSS
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
机电一体化专业应届生求职信
2013/11/27 职场文书
给同学的道歉信
2014/01/16 职场文书
信息技术教学反思
2014/02/12 职场文书
园林系毕业生求职信
2014/06/23 职场文书
干部对照检查材料范文
2014/08/26 职场文书
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书
聊一聊python常用的编程模块
2021/05/14 Python