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 相关文章推荐
一个原生的用户等级的进度条
Jul 03 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
Apr 27 Javascript
jquery 获取标签名(tagName)示例代码
Jul 11 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
Dec 14 Javascript
javascript异步编程的4种方法
Feb 19 Javascript
JavaScript设计模式之适配器模式介绍
Dec 28 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
Feb 24 Javascript
基于JavaScript获取鼠标位置的各种方法
Dec 16 Javascript
设置jquery UI 控件的大小方法
Dec 12 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
Aug 19 Javascript
详解如何在Vue里建立长按指令
Aug 20 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 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
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
PHP面向对象之事务脚本模式(详解)
2017/06/07 PHP
Ext面向对象开发实践(续)
2008/11/18 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
javascript处理表单示例(javascript提交表单)
2014/04/28 Javascript
javascript限制用户只能输汉字中文的方法
2014/11/20 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
JS Array创建及concat()split()slice()的使用方法
2016/06/03 Javascript
AngularJS 遇到的小坑与技巧小结
2016/06/07 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
2016/11/25 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
JavaScript实现职责链模式概述
2018/01/25 Javascript
JavaScript new对象的四个过程实例浅析
2018/07/31 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
2019/11/14 Javascript
React生命周期原理与用法踩坑笔记
2020/04/28 Javascript
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
Python使用 Beanstalkd 做异步任务处理的方法
2018/04/24 Python
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
Python实现序列化及csv文件读取
2020/01/19 Python
tensorflow tf.train.batch之数据批量读取方式
2020/01/20 Python
使用python检查yaml配置文件是否符合要求
2020/04/09 Python
详解python的变量缓存机制
2021/01/24 Python
Python3压缩和解压缩实现代码
2021/03/01 Python
WebSphere 应用服务器都支持哪些认证
2013/12/26 面试题
Linux内核产生并发的原因
2012/07/13 面试题
毕业生求职简历的自我评价
2013/10/07 职场文书
给朋友的道歉信
2014/01/09 职场文书
男方父母婚礼答谢词
2014/01/25 职场文书
校庆标语集锦
2014/06/25 职场文书
私人委托书格式
2014/09/10 职场文书
工程部主管岗位职责
2015/02/12 职场文书
筑梦中国心得体会
2016/01/18 职场文书
《海上日出》教学反思
2016/02/23 职场文书
深入解析MySQL索引数据结构
2021/10/16 MySQL
nginx刷新页面出现404解决方案(亲测有效)
2022/03/18 Servers