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 函数中的参数使用分析
Mar 27 Javascript
显示今天的日期js代码(阳历和农历)
Sep 30 Javascript
Html5 js实现手风琴效果
Apr 17 Javascript
基于JavaScript实现自定义滚动条
Jan 25 Javascript
Angularjs自定义指令Directive详解
May 27 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
Dec 12 Javascript
vue中实现先请求数据再渲染dom分享
Mar 17 Javascript
JS加密插件CryptoJS实现的DES加密示例
Aug 16 Javascript
webpack4 入门最简单的例子介绍
Sep 05 Javascript
vue-router权限控制(简单方式)
Oct 29 Javascript
JS与SQL方式随机生成高强度密码示例
Dec 29 Javascript
详解wepy开发小程序踩过的坑(小结)
May 22 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/09/14 PHP
php多文件上传下载示例分享
2014/02/20 PHP
PHP生成数组再传给js的方法
2014/08/07 PHP
PHP转盘抽奖接口实例
2015/02/09 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
php 函数使用可变数量的参数方法
2017/05/02 PHP
css3实现背景模糊的三种方式
2021/03/09 HTML / CSS
用js计算页面执行时间的函数
2006/12/07 Javascript
JavaScript在多浏览器下for循环的使用方法
2012/11/07 Javascript
百度移动版的url编码解码示例
2014/04/29 Javascript
Javascript中设置默认参数值示例
2014/09/11 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
JavaScript仿聊天室聊天记录
2016/12/27 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
2017/02/23 Javascript
jQuery表格(Table)基本操作实例分析
2017/03/10 Javascript
bootstrap时间插件daterangepicker使用详解
2017/10/19 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
2019/03/28 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
微信小程序 冒泡事件原理解析
2019/09/27 Javascript
[05:59]带你看看DPC的台前幕后
2021/03/11 DOTA
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
Python 备份程序代码实现
2017/03/06 Python
Python制作Windows系统服务
2017/03/25 Python
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
pandas 使用均值填充缺失值列的小技巧分享
2019/07/04 Python
通过celery异步处理一个查询任务的完整代码
2019/11/19 Python
python第三方库学习笔记
2020/02/07 Python
Superdry极度干燥美国官网:英国制造的服装品牌
2018/11/13 全球购物
北美最大的手工艺品零售商之一:Michaels Stores
2019/02/27 全球购物
令人印象深刻的自荐信
2014/05/25 职场文书
商业门面租房协议书
2014/11/25 职场文书
自主招生学校推荐信范文
2015/03/26 职场文书
党员理论学习心得体会
2016/01/21 职场文书
2019各种承诺书范文
2019/06/24 职场文书
Python爬虫进阶之Beautiful Soup库详解
2021/04/29 Python
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android