JS怎么实现同一DOM元素上onClick事件与onDblClick事件并存

这篇文章将为大家详细讲解有关JS怎么实现同一DOM元素上onClick事件与onDblClick事件并存,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

成都创新互联公司服务项目包括孝昌网站建设、孝昌网站制作、孝昌网页制作以及孝昌网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,孝昌网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到孝昌省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!

js的作用是什么

1、能够嵌入动态文本于HTML页面。2、对浏览器事件做出响应。3、读写HTML元素。4、在数据被提交到服务器之前验证数据。5、检测访客的浏览器信息。6、控制cookies,包括创建和修改等。7、基于Node.js技术进行服务器端编程。

具体如下:

最近项目中遇到了在同一DOM元素上需要添加 onclick 和 ondblclick 2个事件,如果按照正常的方式添加处理,结果发现只会执行 onclick,而不会执行 ondblclick;这时我们需要对2个事件的处理函数稍作处理就可以实现2个事件并存了,代码如下:


 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("你双击了我");
 }

单击或双击我

处理思想就是:利用定时器延迟执行onclick事件,这样在双击过程中会取消中途触发的单击事件。

关于“JS怎么实现同一DOM元素上onClick事件与onDblClick事件并存”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


本文标题:JS怎么实现同一DOM元素上onClick事件与onDblClick事件并存
分享网址:http://pwwzsj.com/article/gcjsgi.html