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实现读取txt文档的脚本
Jul 20 Javascript
学习JavaScript设计模式(代理模式)
Dec 03 Javascript
JQuery为元素添加样式的实现方法
Jul 20 Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 Javascript
JavaScript获取短信验证码(周期性)
Dec 29 Javascript
微信小程序实现图片预加载组件
Jan 18 Javascript
微信小程序tabBar用法实例详解
Dec 04 Javascript
Javasript设计模式之链式调用详解
Apr 26 Javascript
Vue组件的使用及个人理解与介绍
Feb 09 Javascript
JS中的算法与数据结构之集合(Set)实例详解
Aug 20 Javascript
JavaScript代理模式原理与用法实例详解
Mar 10 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
Aug 03 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 PDO中文乱码解决办法
2009/07/20 PHP
php从数组中随机抽取一些元素的代码
2012/11/05 PHP
Yii框架日志操作图文与实例详解
2019/09/09 PHP
EasyUI中的tree用法介绍
2011/11/01 Javascript
一个js控制的导航菜单实例代码
2013/12/03 Javascript
node.js中的fs.appendFile方法使用说明
2014/12/17 Javascript
BootStrap glyphicons 字体图标实现方法
2016/05/01 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
2016/08/16 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
2017/03/24 jQuery
jquery实现简单实用的轮播器
2017/05/23 jQuery
angularjs定时任务的设置与清除示例
2017/06/02 Javascript
jQuery.Ajax()的data参数类型详解
2017/07/23 jQuery
微信小程序使用Socket的实例
2017/09/19 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
微信小程序调用后台service教程详解
2020/11/06 Javascript
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
Python_LDA实现方法详解
2017/10/25 Python
使用python进行文本预处理和提取特征的实例
2018/06/05 Python
Django rest framework jwt的使用方法详解
2019/08/08 Python
django框架创建应用操作示例
2019/09/26 Python
python绘制规则网络图形实例
2019/12/09 Python
python统计字符的个数代码实例
2020/02/07 Python
Python os模块常用方法和属性总结
2020/02/20 Python
Python爬虫爬取糗事百科段子实例分享
2020/07/31 Python
基于Python编写一个计算器程序,实现简单的加减乘除和取余二元运算
2020/08/05 Python
python读取excel数据绘制简单曲线图的完整步骤记录
2020/10/30 Python
财务会计专业毕业生自荐信
2013/10/02 职场文书
最新大学职业规划书范文
2013/12/30 职场文书
同志主要表现材料
2014/08/21 职场文书
勇敢的心观后感
2015/06/09 职场文书
2016年10月份红领巾广播稿
2015/12/21 职场文书
教你用Java Swing实现自助取款机系统
2021/06/11 Java/Android
linux中nohup和后台运行进程查看及终止
2021/06/24 Python
Nginx静态压缩和代码压缩提高访问速度详解
2022/05/30 Servers