zoukankan      html  css  js  c++  java
  • Javascript和jquery事件--双击事件

    在js中和jq中对应的命名都为dblclick,ondblclick,但是ondblclick和dom元素的属性相似,可以在行内设置,也可以使用attr设置。

    同时,双击事件需要关注一个问题,那就是双击引起的两次单击问题。鼠标事件,双击和单击发生在如下条件下:

      单击:mousedown, mouseup, click

      双击:mousedown, mouseup, click, mousedown, mouseup, click, dblclick

      可以看到,每触发一次双击事件,就会触发两次单击事件。无论在js还是在jq中,都没有对这个情况做出处理,如果有需要的话,只能你自己解决了,那就是设置延时。

    var timer=null;
    
    function clickfunction(){
    
            clearTimeout(timer);
    
            timer=setTimeout(function(){//初始化一个延时
    
                     console.log("1");
    
                      },250);
    
    }
    
    function dbclickfunction(){
    
            clearTimeout(timer);//发生双击了就阻止单击引发的操作
    
            console.log("2");
    
    }
    
    //js方法
    
    var btn1 = document.getElementById('button1');
    btn1.addEventListener('click',clickfunction);
    btn1.addEventListener('dblclick',dbclickfunction);
    
    //jq方法
    $('#button2').on('click',clickfunction);
    $('#button2').on('dblclick',dbclickfunction);

             对于双击事件的判定中,js给双击预留的时间比jq多一些,在js中如果点击慢一点还是会出现一个单击加一个双击的情况,可以给单击延时久一点,但是这样设置的话,会使得单击事件没有那么灵活,而且如果单击还绑定其他监听器甚至涉及父元素的冒泡事件,情况会更加复杂,尽量避免这样给一个元素同时设置单击和双击事件的情况,同样你也可以自己用单击事件和时间戳设置双击事件。

    http://www.w3school.com.cn/jsref/event_ondblclick.asp

    https://blog.csdn.net/qq_30868289/article/details/79484322

    当你深入了解,你就会发现世界如此广袤,而你对世界的了解则是如此浅薄,请永远保持谦卑的态度。
  • 相关阅读:
    iOS开发UI篇—Modal简单介绍
    iOS开发UI篇—APP主流UI框架结构
    A1081. Rational Sum
    A1049. Counting Ones
    A1008. Elevator
    A1104. Sum of Number Segments
    B1003. 我要通过!
    二分查找、two points、排序
    A1069. The Black Hole of Numbers
    A1101. Quick Sort
  • 原文地址:https://www.cnblogs.com/liwxmyself/p/10249012.html
Copyright © 2011-2022 走看看