精华内容
下载资源
问答
  • 双击事件

    2016-12-14 14:56:04
    有时候需求是需要双击响应,有时候像登录这些,如果由于网络原因,点击多次... * des:双击事件 */ public abstract class OnDoubleClickListener implements View.OnClickListener { private int count = 0; private lo

    有时候需求是需要双击响应,有时候像登录这些,如果由于网络原因,点击多次,就会加载多次,在这里重写一下onClick方法来解决.

    **
     * des:双击事件
     */
    public abstract class OnDoubleClickListener implements View.OnClickListener {
        private int count = 0;
        private long firClick = 0;
        private long secClick = 0;
    
        @Override
        public void onClick(View v) {
            count++;
            if (count == 1) {
                firClick = System.currentTimeMillis();
    
            } else if (count == 2) {
                secClick = System.currentTimeMillis();
                if (secClick - firClick < 1000) {
                    //双击事件
                    onDoubleClick(v);
                }
                count = 0;
                firClick = 0;
                secClick = 0;
            }
        }
    
        protected abstract void onDoubleClick(View v);
    }

    //防止双击,响应多次,设置一个间隔时间

    **
     * des:防止重复点击
     */
    
    public abstract class OnNoDoubleClickListener implements View.OnClickListener {
    
        public static final int MIN_CLICK_DELAY_TIME = 1000;
        private long lastClickTime = 0;
    
        @Override
        public void onClick(View v) {
            long currentTime = Calendar.getInstance().getTimeInMillis();
            if (currentTime - lastClickTime > MIN_CLICK_DELAY_TIME) {
                lastClickTime = currentTime;
                onNoDoubleClick(v);
            }
        }
    
        protected abstract void onNoDoubleClick(View v);
    
    }
    展开全文
  • jquery双击事件

    万次阅读 2018-03-08 14:47:32
    在开发过程中经常会遇到使用双击事件或者避免短时间内连续触发单击事件的逻辑。这里介绍一下对类似问题的处理方法。 一、jquery的dblclick事件 一个DOM元素,如:div,既绑定了 click 事件,又绑定了 dblclick ...

    在开发过程中经常会遇到使用双击事件或者避免短时间内连续触发单击事件的逻辑。这里介绍一下对类似问题的处理方法。

    ####一、jquery的dblclick事件

    一个DOM元素,如:div,既绑定了 click 事件,又绑定了 dblclick 事件,这两个事件分别要做独立的事情。事件处理上没有冲突,都可以各自 完成各自的操作。双击的时候虽然是执行了 dblclick 事件,但是在这之前,也执行了 click 事件

    首先,来了解一下点击事件发生的先后顺序:
    单击:mousedown, mouseup, click
    双击:mousedown, mouseup, click, mousedown, mouseup, click, dblclick
      由此看来,dblclick 事件发生之前,实际上发生了两次 click 事件。其中,第一次的 click 是会被屏蔽掉,但是第二次则不会,所以就出现在双击的时候,也触发 click 事件。

    解决的方法,可以参考下面的代码,用延时的方法实现:

    <!DOCTYPE html>
    <html>
    <head>
      <title></title>
    </head>
    <body>
      <button type="button" id="button">点击我</button>
      <script type="text/javascript">
        function $(id){
          return document.getElementById(id);
        }
        var timer=null;
        $('button').addEventListener('click',function(e){
          clearTimeout(timer);
          timer=setTimeout(function(){//初始化一个延时
            console.log("1");
            // console.log(e);
          },250)
        },false);
        $('button').addEventListener('dblclick',function(){//双击事件会先触发两次单击事件,然后再执行双击事件,使用清除定时器来达到双击只执行双击事件的目的
          clearTimeout(timer);
          console.log("2");
        },false);
      </script>
    </body>
    </html>
    

    注意:移动手机端不能触发jQuery的dblclick事件,例如:

    <input name="btn1" id="btn1" type="button" value="随便点">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#btn1").on("click", function(){console.log("click")});
        $("#btn1").on("dblclick", function(){console.log("dblclick")});
    });
    </script>
    

    ####二、js仿双击事件
    我们可以通过判断两次单击间隔时间来模拟dblclick双击事件,修改脚本如下:

    <input name="btn1" id="btn1" type="button" value="随便点">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        var touchtime = new Date().getTime();
        
        $("#btn1").on("click", function(){
            if( new Date().getTime() - touchtime < 500 ){
                console.log("dblclick");
            }else{
                touchtime = new Date().getTime();
                console.log("click")
            }
        });
    });
    </script>
    
    展开全文
  • vue的h5项目,给一元素绑定双击事件dblclick,双击事件dblclick无效不触发 解决办法:模拟双击事件 dbTest(){ // 全局声明verClickNum = 1, clickTimer = null, lastClickTime = 0; var nowTime = new Date()....

    vue的h5项目,给一元素绑定双击事件dblclick,双击事件dblclick无效不触发
    解决办法:模拟双击事件

    dbTest(){ 
    // 全局声明verClickNum = 1, clickTimer = null, lastClickTime = 0;
             var nowTime = new Date().getTime();
             if (nowTime - this.lastClickTime < 300) {
                 /*双击*/
                 this.verClickNum++;
                 this.lastClickTime = 0;
                 this.clickTimer && clearTimeout(this.clickTimer);
             } else {
                 /*单击*/
                 this.lastClickTime = nowTime;
                 this.clickTimer = setTimeout(function () {
                     if(this.verClickNum > 1){
                         this.verClickNum = 1;
                         return;
                     } else {
                     }
                 }, 300);
             }
    },
    
    展开全文
  • 主要介绍了vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • jQuery-doubleTap是一款非常有用的鼠标双击事件或移动设备的触摸双击事件检测jQuery插件。该插件通过对“click”和“touch”的简单代码优化来实现鼠标双击或触摸双击事件的检测
  • 那么直接的双击事件 就没有 1. 想到双击 肯定会有童鞋想到 jquery的 dblclick 事件 但问题是在移动端就不生效 那这个怎么办么 首先就是可以通过模拟来实现 正常来说 只要第二次点击 和第一次点击的时间小于 300ms...

    主要是移动端 双击会被看成是放大页面,而这个功能 做过h5的童鞋肯定知道 其实移动端是禁止放大 

    那么直接的双击事件 就没有

    1. 想到双击 肯定会有童鞋想到  jquery的 dblclick 事件  但问题是在移动端就不生效 那这个怎么办么

    首先就是可以通过模拟来实现 

    正常来说 只要第二次点击 和第一次点击的时间小于 300ms 就可以 看成是双击 那么就可以判断两次点击的 时间差 来实现了

    通过setTimeout 来模拟实现了  这样的话可能会有延迟哈 

    // 点击事件
            var clickid = 1;
            var timer = null;
            function a() {
                console.log('点击');
            }
            function b() {
                console.log('双击');
            }
            
            $('div').click(function() {
                if(clickid == 1) {
                    startTime = new Date().getTime();
                    clickid++;
                    timer = setTimeout(function () {
                        a(); // 单击事件触发
                        clickid = 1;
                    }, 300)
                }
    
                if(clickid == 2) {
                    clickid ++ ;
                } else {
                    var endTime = new Date().getTime();
                    if ((endTime - startTime) < 300) {
                        b(); // 双击事件
                        clickid = 1;
                        clearTimeout(timer);
                    }
                }
            })

    我们看下实际效果哈

     

    2. 第二种就可简单了 就是通过zepto 的 双击 事件 来快速 实现了

    <script src="../js/zepto.js"></script>
        <script src="../js/event.js"></script>
        <script src="../js/touch.js"></script>
    $('div').on('doubleTap', function() {
                console.log('双击');
            })
            $('div').on('tap', function () {
                console.log('单击');
            })

    总结来说吧   

    模拟的 有点延迟  效果肯定没有zepto的好  毕竟 touch 和 click 之间本来就有不小的延迟差

    看你自己选择了     没必要为了一次双击就引入一个库  个人感觉 看你自己实际项目需要了 

    关注我 持续更新前端知识 

    展开全文
  • 本人需要给bootstrap-treeview的树节点添加双击事件。而该插件原生方法中不带双击事件功能。该插件的节点默认绑定的单击事件,由此引起了单击事件和双击事件的冲突。 编写测试代码 引起冲突的代码: 问题效果展示:...
  • 很多人都学习过java,但是你知道java鼠标双击事件怎么实现吗,跟着学习啦小编一起学习ava鼠标双击事件。java鼠标双击事件的实现方法鼠标的单双击事件在很多时候对我们帮助很大,但是在JAVA中却没有给出鼠标双击事件....
  • 即一个标签元素(如button等),如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时,不会触发双击事件(dblclick), 执行双击事件(dblclick)时却会触发两次单击事件(click)。...
  • vue双击事件

    2019-11-22 14:42:27
    想给图片加双击事件,弹出一个弹层,发现双击事件不好使,经百度之后发现双击事件写法问题。 原来的写法: 百度之后的写法:
  • js实现单击事件和双击事件

    万次阅读 2019-08-06 09:28:58
    一下代码可以解决单击事件和双击事件冲突的问题 //单击事件 var timeoutID = null; $("#test).on('click',function(e){ clearTimeout(timeoutID); timeoutID = window.setTimeout(function (){ //写单击事件...
  • Android实现双击事件

    2018-05-08 13:28:17
    能实现双击事件,双击单击调用对应方法。快来下载吧,不懂可以留言
  • dbclick 改为dblclick即可: 实例代码: <div id="app"> <p>马云的年龄:{{age}}岁</p> ...input type="button" @dblclick='reduce(10)' value="减少10岁">...input type="button" @dblclick='...
  • Silverlight ListBox双击事件
  • js 的单双击事件同时存在会有一个问题:双击事件会同时触发单击事件,两个事件存在冲突。 我们加一个延迟时间就能很好的解决这个问题。 原理: 当接收到第一个点击时,我们先把单击事件存储在这个是全局变量 click_...
  • 主要介绍了C#实现自定义双击事件,需要的朋友可以参考下
  • Vue双击事件

    万次阅读 2019-05-13 10:05:16
    Vue双击事件 dblclick <div id="payState" @click="shishiClick"></div> 应该是 <div id="payState" @dblclick="shishiClick"></div>
  • 同时给元素绑定,单击事件和双击事件,解决原本两个事件不能并存的问题。 希望能帮助大家解决问题。
  • DBClickBlocker 单击事件防止变成双击事件~ avoid fast click event in android
  • jQuery触摸鼠标双击事件检测代码是一款非常有用的鼠标双击事件或移动设备的触摸双击事件检测jQuery插件。
  • js双击事件屏蔽单击事件

    千次阅读 2019-06-23 10:34:15
    在单击事件中将绑定的函数放在定时器中,利用定时器的延迟来清除双击对单击事件的影响,如果是双击事件则在双击事件内部清除定时器,如果是单击事件则正常执行定时器中的函数;但是需要记得每次进入单击事件都需要...
  • fullcalendar扩展双击事件 源码版(直接改动源码)和扩展版(支持新版本)

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,295
精华内容 4,118
关键字:

双击事件