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 相关文章推荐
FLASH 广告之外的链接
Dec 16 Javascript
jQuery 相关控件的事件操作分解
Aug 03 Javascript
Javascript匿名函数的一种应用 代码封装
Jun 27 Javascript
用unescape反编码得出汉字示例
Apr 24 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
Dec 05 Javascript
关于vue-router路径计算问题
May 10 Javascript
微信小程序组件 marquee实例详解
Jun 23 Javascript
webpack-dev-server远程访问配置方法
Feb 22 Javascript
基于vue.js组件实现分页效果
Dec 29 Javascript
在NPM发布自己造的轮子的方法步骤
Mar 09 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 Javascript
JavaScript封装单向链表的示例代码
Sep 17 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
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
PHP中“=&gt;
2019/03/01 PHP
一文看懂PHP进程管理器php-fpm
2020/06/01 PHP
判断JavaScript对象是否可用的最正确方法分析
2008/10/03 Javascript
javascript css在IE和Firefox中区别分析
2009/02/18 Javascript
javascript html 静态页面传参数
2009/04/10 Javascript
Jquery异步请求数据实例代码
2011/12/28 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
2013/04/19 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
js、jquery图片动画、动态切换示例代码
2014/06/03 Javascript
javascript设计模式之解释器模式详解
2014/06/05 Javascript
js获取当前日期时间及其它操作汇总
2015/04/17 Javascript
微信小程序 loading 详解及实例代码
2016/11/09 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
2021/01/27 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
Python 字符串中的字符倒转
2008/09/06 Python
Python查找第n个子串的技巧分享
2018/06/27 Python
python批量修改图片后缀的方法(png到jpg)
2018/10/25 Python
Python 200行代码实现一个滑动验证码过程详解
2019/07/11 Python
详解Python time库的使用
2019/10/10 Python
PYTHON实现SIGN签名的过程解析
2019/10/28 Python
Python调用graphviz绘制结构化图形网络示例
2019/11/22 Python
Python使用docx模块实现刷题功能代码
2020/02/13 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
浅析css3中matrix函数的使用
2016/06/06 HTML / CSS
购买英国原创艺术:Art Gallery
2018/08/25 全球购物
EMU Australia澳大利亚官网:澳大利亚本土雪地靴品牌
2019/07/24 全球购物
毕业生实习鉴定
2013/12/11 职场文书
诚信贷款承诺书
2014/05/30 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
装修公司管理制度
2015/08/05 职场文书
基于Redis结合SpringBoot的秒杀案例详解
2021/10/05 Redis
最新最全的手机号验证正则表达式
2022/02/24 Javascript