zoukankan      html  css  js  c++  java
  • jquery处理单击和双击事件

    今天做div点击时,需要用到同一div的单击和双击事件,出现问题如下

    例子:

    Html

    <body>
        <div id="div_1">单击双击我</div>    
        事件执行次数:<input id="input_1" type="text" value="0" />
    </body>

    js

        $(document).ready(function(){  
            var i = 0;         
    
            $("#div_1").dblclick(function(){
                i = i + 2;
                $("#input_1").val(i);
            });
    
            $("#div_1").click(function(){
                i++;
                $("#input_1").val(i);
            });
        });

    结果:

    双击div后,input值为4,说明执行1次双击和2次单击事件

    找了网友的博客后,修改js如下

    $(document).ready(function(){  
            var i = 0;         
            var TimeFn = null;
    
            $("#div_1").dblclick(function(){
                clearTimeout(TimeFn);
                i = i + 2;
                $("#input_1").val(i);
            });
    
            $("#div_1").click(function(){
                // 取消上次延时未执行的方法
                clearTimeout(TimeFn);
                //执行延时
                TimeFn = setTimeout(function(){
                //do function在此处写单击事件要执行的代码
                i++;
                $("#input_1").val(i);
                },300);
            });
        });

    结果:

    1. 双击后,input值为2

    2. 单击后,input值为1

  • 相关阅读:
    InnoDB in Mysql
    Store engine for Mysql
    Replication in Mysql
    Mysql note 3
    查看SQL对象的创建脚本
    Mysql note 2
    Jsp登录后数据采集奇怪的Apache服务器
    一行代码收集页
    使用Subsonic与ObjectDataSource(ODS)
    二分查找
  • 原文地址:https://www.cnblogs.com/cczhoufeng/p/3927983.html
Copyright © 2011-2022 走看看