实现html/js同时启用单双击事件

在同一个dom元素同时启用了单击和双击事件时,双击会触发两次单击事件和一次双击事件,并且触发顺序是:单击1 -> 单击2 -> 双击,我们需要想办法在双击时屏蔽掉单击的效果

基本思路:

延迟单击事件的响应,并在下一个单击事件触发时取消上一个还未执行的单击事件(处于延迟时间内),在双击事件触发时也取消还未执行的单击事件。

调用的相关功能:

onclick:单击事件
ondblclick:双击事件
setTimeout:设置延时执行,返回计时器
clearTimeout:清除一个计时器(不再调用其响应函数)

还需要一个全局变量来传递单击事件设置的计时器

示例

html code

<div onclick="singleClick()" ondblclick="dbClick()">点我</div>

js code

var timer;
function singleClick()
{
    clearTimeout(timer);
    timer = setTimeout("单击响应函数", 200);    //“200”单位是毫秒
}
function dbClick()
{
    clearTimeout(timer);
    双击响应函数
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在iOS开发中经常会涉及到触摸事件。本想自己总结一下,但是遇到了这篇文章,感觉总结的已经很到位,特此转载。作者:L...
    WQ_UESTC阅读 6,148评论 4 26
  • 好奇触摸事件是如何从屏幕转移到APP内的?困惑于Cell怎么突然不能点击了?纠结于如何实现这个奇葩响应需求?亦或是...
    Lotheve阅读 58,310评论 51 603
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,067评论 19 139
  • 犹如五雷轰顶,张老善人的二孙子一下子懵了,跌坐在椅子上,双手抱头,半天不说话。他知道,数天的纠结和疼痛后才作出的决...
    豫兰剑客阅读 251评论 0 0
  • 今天在Git拉取代码后编译时Studio报出如下错误: 查阅后是重复依赖造成的,也就是说在项目中存在两个相同的类,...
    小智在不在阅读 695评论 0 0