javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick


Posted in Javascript onFebruary 04, 2009

这里给出一段测试代码:
<script type="text/javascript">
document.onkeydown = function(){
document.getElementById("test").innerHTML += "keydown<br/>";
}
document.onkeyup = function(){
document.getElementById("test").innerHTML += "keyup<br/>";
}
document.onkeypress = function(){
document.getElementById("test").innerHTML += "keypress<br/>";
}
</script>
<div id="test"></div>
测试结果为:
keydown
keypress
keyup
显而易见,事件发生的顺序是: keydown --> keypress --> keyup
当按住一个键一段时间后再放开时,结果为:
keydown
keypress
keydown
keypress
keydown
keypress
keydown
keypress
...
keyup
n个keydown和n个keypress,1个keyup,系统设置的时间间隔.
关于click和dblclick
前段时间群里面的一个朋友问过一个关于click和dblclick的问题,在这里同时也整理一下,他的要求是click和dblclick有不同的事件处理程序,但是如果触发了dblclick则对click不做处理.如何解决?
我们先来看一下事件的发生情况,测试代码如下:
<script type="text/javascript">
document.onclick = function(){
document.getElementById("test").innerHTML += "click<br/>";
}
document.ondblclick = function(){
document.getElementById("test").innerHTML += "dblclick<br/>";
}
</script>
<div id="test"></div>
双击时结果如下:
click
dblclick
当放慢点击速度时,结果如下:
click
click
click
可见,dblclick时,首先会触发一个click事件,然后如果在系统设置的双击延迟时间范围内有第二次click事件,则被认为是dblclick事件.
那么如何解决这位朋友提出的问题呢?给出代码如下:
<script type="text/javascript">
function clickTest(){
document.getElementById("test").innerHTML += "click<br/>";
}
function dblclickTest(){
document.getElementById("test").innerHTML += "dblclick<br/>";
}
document.onclick = function(){
this.timeout = window.setTimeout(clickTest,300);
}
document.ondblclick = function(){
if(this.timeout)window.clearTimeout(this.timeout);
dblclickTest();
}
</script>
<div id="test"></div>
双击测试结果如下:
dblclick
dblclick
dblclick
dblclick

Javascript 相关文章推荐
Add a Picture to a Microsoft Word Document
Jun 15 Javascript
jquery 仿QQ校友的DIV模拟窗口效果源码
Mar 24 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
Apr 20 Javascript
javascript学习笔记(四)function函数部分
Sep 30 Javascript
JSON简介以及用法汇总
Feb 21 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
Nov 07 Javascript
JS 实现 ajax 异步浏览器兼容问题
Jan 21 Javascript
vue使用技巧及vue项目中遇到的问题
Jun 04 Javascript
JS canvas绘制五子棋的棋盘
May 28 Javascript
CryptoJS中AES实现前后端通用加解密技术
Dec 18 Javascript
Node.js事件的正确使用方法
Apr 05 Javascript
Vue中函数防抖节流的理解及应用实现
Apr 24 Javascript
JS 强制设为首页的代码
Jan 31 #Javascript
IE8 浏览器Cookie的处理
Jan 31 #Javascript
JavaScript入门教程 Cookies
Jan 31 #Javascript
JavaScript入门教程(12) js对象化编程
Jan 31 #Javascript
JavaScript入门教程(11) js事件处理
Jan 31 #Javascript
JavaScript入门教程(10) 认识其他对象
Jan 31 #Javascript
JavaScript入门教程(9) Document文档对象
Jan 31 #Javascript
You might like
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
PHP把小数转成整数3种方法
2014/06/30 PHP
php中opendir函数用法实例
2014/11/15 PHP
javascript 必知必会之closure
2009/09/21 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
2013/02/05 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
jQuery :first选择器使用介绍
2013/08/09 Javascript
JavaScript设计模式之工厂模式和构造器模式
2015/02/11 Javascript
javascript版2048小游戏
2015/03/18 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
跟我学习javascript的prototype使用注意事项
2015/11/17 Javascript
jquery实现图片放大镜功能
2015/11/23 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
Vue.js教程之计算属性
2016/11/11 Javascript
如何使用JS在HTML中自定义字符串格式化
2017/07/20 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
2018/09/04 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
[05:53]完美世界携手游戏风云打造 卡尔工作室观战系统篇
2013/04/22 DOTA
[01:28:56]2014 DOTA2华西杯精英邀请赛 5 24 CIS VS DK
2014/05/26 DOTA
python函数形参用法实例分析
2015/08/04 Python
Python 字符串与数字输出方法
2018/07/16 Python
启动Atom并运行python文件的步骤
2018/11/09 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
Python openpyxl 插入折线图实例
2020/04/17 Python
python打开音乐文件的实例方法
2020/07/21 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
简单了解python关键字global nonlocal区别
2020/09/21 Python
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
波兰香水和化妆品购物网站:Notino.pl
2017/11/07 全球购物
市级绿色学校申报材料
2014/08/25 职场文书
同学会邀请函模板
2015/01/30 职场文书
法学专业求职信范文
2015/03/19 职场文书
js中Object.create实例用法详解
2021/10/05 Javascript
DIY胆机必读:各国电子管评价
2022/04/06 无线电