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 相关文章推荐
createElement动态创建HTML对象脚本代码
Nov 24 Javascript
jQuery图片播放8款精美插件分享
Feb 17 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 Javascript
jquery制作弹窗提示窗口代码分享
Mar 02 Javascript
一个检测表单数据的JavaScript实例
Oct 31 Javascript
JavaScript中Date.toSource()方法的使用教程
Jun 12 Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
Sep 28 Javascript
Vue $emit $refs子父组件间方法的调用实例
Sep 12 Javascript
详解angularjs跨页面传参遇到的一些问题
Nov 01 Javascript
js 将多个对象合并成一个对象 assign方法的实现
Sep 24 Javascript
解决iView Table组件宽度只变大不变小的问题
Nov 13 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/03/23 PHP
简单的方法让你的后台登录更加安全(php中加session验证)
2012/08/22 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
PHP设计模式之抽象工厂模式实例分析
2019/03/25 PHP
javascript中删除指定数组中指定的元素的代码
2011/02/12 Javascript
jQuery之网页换肤实现代码
2011/04/30 Javascript
jquery remove方法应用详解
2012/11/22 Javascript
图片动画横条广告带上下滚动的JS代码
2013/10/25 Javascript
使用JavaScript获取电池状态的方法
2014/05/03 Javascript
sogou地图API用法实例教程
2014/09/11 Javascript
基于jQuery仿淘宝产品图片放大镜特效
2020/10/19 Javascript
详谈javascript精度问题与调整
2017/07/08 Javascript
浅谈Node Inspector 代理实现
2017/10/19 Javascript
Vue.js 动态为img的src赋值方法
2018/03/14 Javascript
vue+webpack实现异步加载三种用法示例详解
2018/04/24 Javascript
JavaScript中 ES6变量的结构赋值
2018/07/10 Javascript
ES6基础之展开语法(Spread syntax)
2019/02/21 Javascript
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
JavaScript常用工具函数大全
2020/05/06 Javascript
[57:36]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第三场 2月1日
2021/03/11 DOTA
python使用reportlab画图示例(含中文汉字)
2013/12/03 Python
python字典序问题实例
2014/09/26 Python
Python 常用string函数详解
2016/05/30 Python
python数据分析数据标准化及离散化详解
2018/02/26 Python
Python嵌套式数据结构实例浅析
2019/03/05 Python
Django项目主urls导入应用中views的红线问题解决
2019/08/10 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
python文件和文件夹复制函数
2020/02/07 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
小学三年级数学教学反思
2014/01/31 职场文书
小学领导班子对照材料
2014/08/23 职场文书
离职报告范文
2014/11/04 职场文书
整脏治乱工作简报
2015/07/21 职场文书
环保主题班会教案
2015/08/13 职场文书
python Django框架快速入门教程(后台管理)
2021/07/21 Python