JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
更新时间：2018年06月07日 11:17:13 作者：山哥
这篇文章主要介绍了JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法,结合实例形式分析了javascript通过针对单击onclick事件增加定时器进行onClick事件与onDblClick事件的区别判定操作,需要的朋友可以参考下
本文实例讲述了JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法。分享给大家供大家参考，具体如下：
最近项目中遇到了在同一DOM元素上需要添加 onclick 和 ondblclick 2个事件，如果按照正常的方式添加处理，结果发现只会执行 onclick，而不会执行 ondblclick；这时我们需要对2个事件的处理函数稍作处理就可以实现2个事件并存了，代码如下：
<script type="text/javascript">
var clickTimer = null;
function _click(){
if(clickTimer) {
window.clearTimeout(clickTimer);
clickTimer = null;
}
clickTimer = window.setTimeout(function(){
// your click process code here
alert("你单击了我");
}, 300);
}
function _dblclick(){
if(clickTimer) {
window.clearTimeout(clickTimer);
clickTimer = null;
}
// your click process code here
alert("你双击了我");
}
</script>
<button onclick="_click();" ondblclick="_dblclick();">单击或双击我</button>
处理思想就是：利用定时器延迟执行onclick事件，这样在双击过程中会取消中途触发的单击事件。
PS：关于javascript事件说明可参考本站javascript事件与功能说明大全：http://tools.jb51.net/table/javascript_event
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript事件相关操作与技巧大全》、《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
JavaScript Title、alt提示（Tips）实现源码解读
我们知道给某些HTML标签加上title属性后，这个标签对象在浏览的时候，鼠标移上去就会有一个小提示框出来，并显示title定义的内容。2010-12-12
这篇文章主要介绍了在 JavaScript 中比较字符串的 4 种方法,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-10-10
跨标签页通信是指在浏览器中的不同标签页之间进行数据传递和通信的过程,这篇文章为大家整理了前端常见的跨标签页通信方式,有需要的小伙伴可以了解下2023-10-10
JavaScript 中使用Promise.all()方法经验技巧详解
这篇文章主要为大家介绍了JavaScript 中使用Promise.all()方法经验技巧详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
这篇文章主要介绍了js实现的xml对象转json功能,结合实例形式分析了javascript转换成xml所涉及的字符串、对象、数组、遍历等操作技巧与使用方法,需要的朋友可以参考下2016-12-12
avaScript URL() 构造函数返回一个新创建的 URL 对象,表示由一组参数定义的 URL,利用该构造函数可以获取 RL的查询、参数等,下面这篇文章主要给大家介绍了关于JavaScript URL对象的一些妙用,需要的朋友可以参考下2021-10-10
这篇文章主要介绍了详解搭建es6+devServer简单开发环境，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
javascript获取所有同类checkbox选项(实例代码)
javascript获取所有同类checkbox选项的简单实例。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
这篇文章主要介绍了前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有Content-Disposition的下载,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-04-04
GUID（全局统一标识符）是指在一台机器上生成的数字，下面为大家介绍下原生JavaScript生成GUID的实现，需要的朋友不要错过2014-09-09
最新评论