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 相关文章推荐
Jquery AJAX 用于计算点击率(统计)
Jun 30 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
Mar 01 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
Feb 05 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
Jun 22 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
Jun 30 Javascript
jquery实现具有收缩功能的垂直导航菜单
Feb 16 Javascript
JS字符串的切分用法实例
Feb 22 Javascript
Vue和Bootstrap的整合思路详解
Jun 30 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
Apr 14 Javascript
viewer.js实现图片预览功能
Jun 24 Javascript
JS实现炫酷轮播图
Nov 15 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程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
zend api扩展的php对象的autoload工具
2011/04/18 PHP
for循环连续求和、九九乘法表代码
2012/02/20 PHP
对淘宝URL中ID提取的PHP代码
2013/09/01 PHP
一个简单的jQuery计算器实现了连续计算功能
2014/07/21 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
Servlet实现文件上传,可多文件上传示例
2016/12/05 Javascript
Bootstrap select多选下拉框实现代码
2016/12/23 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
vue省市区三联动下拉选择组件的实现
2017/04/28 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
2017/05/08 Javascript
jquery Ajax实现Select动态添加数据
2017/06/08 jQuery
jQuery扇形定时器插件pietimer使用方法详解
2017/07/18 jQuery
使用JS实现图片轮播的实例(前后首尾相接)
2017/09/21 Javascript
Javascript获取某个月的天数
2018/05/30 Javascript
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
[02:15]2014DOTA2国际邀请赛 赛后退役选手回顾
2014/08/01 DOTA
[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20
2020/11/23 DOTA
python基础教程之udp端口扫描
2014/02/10 Python
跟老齐学Python之集合的关系
2014/09/24 Python
Python 字典dict使用介绍
2014/11/30 Python
CentOS中升级Python版本的方法详解
2017/07/10 Python
Python中用psycopg2模块操作PostgreSQL方法
2017/11/28 Python
python 采用paramiko 远程执行命令及报错解决
2019/10/21 Python
Pandas-Cookbook 时间戳处理方式
2019/12/07 Python
iRobot官网:改变生活的家用机器人品牌
2016/09/20 全球购物
诉讼授权委托书范本
2014/10/05 职场文书
三八妇女节寄语
2015/02/27 职场文书
2016应届大学生自荐信模板
2016/01/28 职场文书
创业计划书之游泳馆
2019/09/16 职场文书
python实现简易自习室座位预约系统
2021/06/30 Python
numpy array找出符合条件的数并赋值的示例代码
2022/06/01 Python