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 相关文章推荐
科讯商业版中用到的ajax空间与分页函数
Sep 02 Javascript
如何让div span等元素能响应键盘事件操作指南
Nov 13 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
详解Javacript和AngularJS中的Promises
Feb 09 Javascript
JavaScript登录记住密码操作(超简单代码)
Mar 22 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
Apr 12 Javascript
微信小程序自定义模态对话框实例详解
Aug 16 Javascript
angular指令笔记ng-options的使用方法
Sep 18 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
Jul 13 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
Mar 28 Javascript
vue路由分文件拆分管理详解
Aug 13 Javascript
javascript全局自定义鼠标右键菜单
Dec 08 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中计算未知长度的字符串哪个字符出现的次数最多的代码
2012/08/14 PHP
修改apache配置文件去除thinkphp url中的index.php
2014/01/17 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
jquery tools 系列 scrollable(2)
2009/09/06 Javascript
Mootools 1.2教程 输入过滤第一部分(数字)
2009/09/15 Javascript
javascript encodeURI和encodeURIComponent的比较
2010/04/03 Javascript
jquery animate图片模向滑动示例代码
2011/01/26 Javascript
addEventListener 的用法示例介绍
2014/05/07 Javascript
关于JavaScript中name的意义冲突示例介绍
2014/05/29 Javascript
JavaScript整除运算函数ceil和floor的区别分析
2015/04/14 Javascript
js+HTML5实现视频截图的方法
2015/06/16 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
2016/03/18 Javascript
Node.js实现文件上传
2016/07/05 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
JavaScript实现倒计时跳转页面功能【实用】
2016/12/13 Javascript
bootstrap中添加额外的图标实例代码
2017/02/15 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
layer弹窗插件操作方法详解
2017/05/19 Javascript
Node.js引入UIBootstrap的方法示例
2018/05/11 Javascript
Vue拖拽组件开发实例详解
2018/05/11 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python @property使用方法解析
2019/09/17 Python
python使用itchat模块给心爱的人每天发天气预报
2019/11/25 Python
Python常用库Numpy进行矩阵运算详解
2020/07/21 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
2021/01/05 HTML / CSS
荷兰的时尚市场:To Be Dressed
2019/05/06 全球购物
银行员工辞职信范文
2014/01/20 职场文书
春节超市活动方案
2014/08/14 职场文书
单位婚育证明范本
2014/11/21 职场文书
2016新年感言
2015/08/03 职场文书
2016年优秀党员教师先进事迹材料
2016/02/29 职场文书
经典《舰娘》游改全新动画预告 预定11月开播
2022/04/01 日漫