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中的几个运算符
Jun 29 Javascript
JS 文字符串转换unicode编码函数
May 30 Javascript
9个JavaScript评级/投票插件
Jan 18 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
Jan 17 Javascript
javascript中的throttle和debounce浅析
Jun 06 Javascript
jquery操作对象数组元素方法详解
Nov 26 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
Dec 08 Javascript
JavaScript编写棋盘覆盖代码详解
Aug 28 Javascript
JavaScript闭包原理与用法实例分析
Aug 10 Javascript
vue中子组件传递数据给父组件的讲解
Jan 27 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
Oct 15 Javascript
JS事件循环机制event loop宏任务微任务原理解析
Aug 04 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调用三种数据库的方法(2)
2006/10/09 PHP
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
PHP数组相加操作及与array_merge的区别浅析
2016/11/26 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
PHP语言对接抖音快手小红书视频/图片去水印API接口源码
2020/08/11 PHP
JSChart轻量级图形报表工具(内置函数中文参考)
2010/10/11 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
2013/03/18 Javascript
轻松实现Bootstrap图片轮播
2020/04/20 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
jQuery实现搜索页面关键字的功能
2017/02/16 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
2017/05/15 jQuery
jQuery复合事件用法示例
2017/06/10 jQuery
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
vue2组件之select2调用的示例代码
2017/10/12 Javascript
Javascript实现运算符重载详解
2018/04/07 Javascript
JS实现读取xml内容并输出到div中的方法示例
2018/04/19 Javascript
linux 后台运行node服务指令方法
2018/05/23 Javascript
使用Angular-CLI构建NPM包的方法
2018/09/07 Javascript
详解在Node.js中发起HTTP请求的5种方法
2019/01/10 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
2020/08/19 Javascript
Vue父组件监听子组件生命周期
2020/09/03 Javascript
Android基于TCP和URL协议的网络编程示例【附demo源码下载】
2018/01/23 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
pycharm访问mysql数据库的方法步骤
2019/06/18 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
2020/05/26 Python
介绍一下如何优化MySql
2016/12/20 面试题
团员学习总结的自我评价范文
2013/10/14 职场文书
地理科学专业毕业生求职信
2013/10/15 职场文书
财经学院自荐信范文
2014/02/02 职场文书
个人合伙协议书范本
2014/10/14 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
优秀班组事迹材料
2014/12/24 职场文书
储备店长岗位职责
2015/04/14 职场文书
小学中队活动总结
2015/05/11 职场文书
项目验收申请报告
2015/05/15 职场文书