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 设置url参数
Jul 08 Javascript
Javascript中获取对象的原型对象的方法小结
Feb 25 Javascript
jQuery实现自定义checkbox和radio样式
Jul 13 Javascript
浅谈jQuery中事情的动态绑定
Feb 12 Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
Feb 26 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
Mar 06 Javascript
vue递归组件实战之简单树形控件实例代码
Aug 27 Javascript
JavaScript实现打砖块游戏
Feb 25 Javascript
JavaScript实现拖拽效果
Mar 16 Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 Javascript
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
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
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
php实现求相对时间函数
2015/06/15 PHP
windows下apache搭建php开发环境
2015/08/27 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
Aster vs KG BO3 第二场2.19
2021/03/10 DOTA
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
2013/01/04 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
2015/09/16 Javascript
详解JavaScript中的构造器Constructor模式
2016/01/14 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
2016/02/27 Javascript
JS脚本实现动态给标签控件添加事件的方法
2016/06/02 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
原生JS实现圣旨卷轴展开效果
2017/03/06 Javascript
bootstrap table表格使用方法详解
2017/04/26 Javascript
JavaScript判断浏览器和hack滚动条的写法
2017/07/23 Javascript
浅析从vue源码看观察者模式
2018/01/29 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
2018/05/16 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
2018/08/22 Javascript
Angular封装搜索框组件操作示例
2019/04/25 Javascript
Vuex新手的理解与使用详解
2019/05/31 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
2020/09/16 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
[02:28]DOTA2英雄基础教程 狼人
2013/12/23 DOTA
[52:15]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS LGD-GAMING
2014/05/23 DOTA
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
从零学Python之引用和类属性的初步理解
2014/05/15 Python
使用Python的Zato发送AMQP消息的教程
2015/04/16 Python
python编程使用协程并发的优缺点
2018/09/20 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
Python 实现使用空值进行赋值 None
2020/03/12 Python
python 写函数在一定条件下需要调用自身时的写法说明
2020/06/01 Python
护理专业个人求职简历的自我评价
2013/10/13 职场文书
大学理论知识学习自我鉴定
2014/04/28 职场文书
创业计划书之电动车企业
2019/10/11 职场文书
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers