美文网首页
实现html/js同时启用单双击事件

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

作者: aliasToHell | 来源:发表于2017-09-26 17:16 被阅读0次

    在同一个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);
        双击响应函数
    }
    

    相关文章

      网友评论

          本文标题:实现html/js同时启用单双击事件

          本文链接:https://www.haomeiwen.com/subject/repfrxtx.html