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 相关文章推荐
Javascript下的keyCode键码值表
Apr 10 Javascript
javascript网页关闭时提醒效果脚本
Oct 22 Javascript
JS 获取span标签中的值的代码 支持ie与firefox
Aug 24 Javascript
浅析Bootstrap表格的使用
Jun 23 Javascript
js实现自动轮换选项卡
Jan 13 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
Mar 07 Javascript
JS实现图片预览的两种方式
Jun 27 Javascript
ReactNative Image组件使用详解
Aug 07 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
May 21 Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 Javascript
JavaScript中的回调函数实例讲解
Jan 27 Javascript
JavaScript实现单点登录的示例
Sep 23 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
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
php学习之 循环结构实现代码
2011/06/09 PHP
浅谈PHP中JSON数据操作
2015/07/01 PHP
Yii中创建自己的Widget实例
2016/01/05 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
vue.js父组件使用外部对象的方法示例
2017/04/25 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
2017/08/22 Javascript
Angular4 Select选择改变事件的方法
2018/10/09 Javascript
JavaScript this关键字指向常用情况解析
2020/09/02 Javascript
python基于右递归解决八皇后问题的方法
2015/05/25 Python
Python3使用requests登录人人影视网站的方法
2016/05/11 Python
Python PyQt5标准对话框用法示例
2017/08/23 Python
Python实现购物系统(示例讲解)
2017/09/13 Python
简单了解什么是神经网络
2017/12/23 Python
Python去除、替换字符串空格的处理方法
2018/04/01 Python
TensorFlow实现iris数据集线性回归
2018/09/07 Python
PyGame贪吃蛇的实现代码示例
2018/11/21 Python
如何用python写一个简单的词法分析器
2018/12/18 Python
pytorch 实现tensor与numpy数组转换
2019/12/27 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
HTML5实现一个能够移动的小坦克示例代码
2013/09/02 HTML / CSS
Tostadora意大利:定制T恤
2019/04/08 全球购物
全球精选男装和家居用品:Article
2020/04/13 全球购物
如何利用find命令查找文件
2016/11/18 面试题
培训主管的职业生涯规划
2014/03/06 职场文书
探亲假请假条
2014/04/11 职场文书
亮剑精神演讲稿
2014/05/23 职场文书
篮球比赛拉拉队口号
2014/06/10 职场文书
上课迟到检讨书
2015/05/06 职场文书
2015年秋学期教研工作总结
2015/10/14 职场文书
MySQL查询学习之基础查询操作
2021/05/08 MySQL