在我们进行网页开发的过程中经常会遇到这么一个问题,为一个链接注册双击事件,或者让一个按钮或者其他元素上面同时注册单击或者双击事件,这时候我们发现网页中的双击事件似乎永远都不会起作用,原因是当我们点击一次的时候,就被超链接或者单击事件截获了,本文描述了一个如何解决这个技术问题的具体方法。本解决方案的实现原理是,单击事件和双击事件都调用同一个方法,我们根据两次鼠标点击的间隔事件来判断到底是单击还是双击事件。单击事件来临的时候先不调用,等一小段时间,过了这段时间,如果没有下一次单击来临就开始调用单击对应的操作,如果有下一次点击就调用双击。
详细描述请参加下面代码清单:
< HTML>
  < HEAD>
  < TITLE> javascript 实现单击和双击并存 < /TITLE>
  < META NAME=" Generator" CONTENT=" EditPlus" >
  < META NAME=" Author" CONTENT=" http://www.javabiz.cn/" >
  < META NAME=" Keywords" CONTENT=" " >
  < META NAME=" Description" CONTENT=" " >
  < /HEAD>

< BODY>
  < SCRIPT LANGUAGE=" JavaScript" >
  < !--
  var dcTime=250;       // doubleclick time
  var dcDelay=100;     // no clicks after doubleclick
  var dcAt=0;               // time of doubleclick
  var savEvent=null; // save Event for handling doClick().
  var savEvtTime=0;   // save time of click event.
  var savTO=null;       // handle of click setTimeOut
 
  function showMe(txt) {
    document.forms[0].elements[0].value += txt;
  }
 
  function handleWisely(which) {
    switch (which) {
        case " click" :           
            savEvent = which;
            d = new Date();
            savEvtTime = d.getTime();
            savTO = setTimeout(" doClick(savEvent)" , dcTime);
            break;
        case " dblclick" :
            doDoubleClick(which);
            break;
        default:
    }
  }
 
  function doClick(which) {
    if (savEvtTime - dcAt < = 0) {
        return false;
    }
    showMe(" 单击" );
  }
 
  function doDoubleClick(which) {
    var d = new Date();
    dcAt = d.getTime();
    if (savTO != null) {
        savTO = null;
    }
    showMe(" 双击" );
  }

//-->
  < /SCRIPT>

< p>
            < a href=" javascript:void(0)"
                οnclick=" handleWisely(event.type)"
                οndblclick=" handleWisely(event.type)"
                style=" color: blue; font-family: arial; cursor: hand" >
          点击一下看看结果:
      < /a>
      < /p>
       
      < form>
          < table>
              < tr>
                  < td valign=" top" >
                    事件模式: < textarea rows=" 4" cols=" 60" wrap=" soft" > < /textarea>
                  < /td>
              < /tr>
              < tr>

< td valign=" top" >
                      < input type=" Reset" >
                  < /td>
              < /tr>
          < /table>
      < /form>
  < /BODY>
< /HTML>

转载于:https://www.cnblogs.com/kungfupanda/archive/2010/10/02/1799260.html

javascript 实现单击和双击并存相关推荐

  1. javascript 鼠标单击和双击事件并存的实现方法

    http://www.jbxue.com/article/8033.html 本文介绍下实现javascript鼠标单击与双击事件并存的方法,经常需要为一个链接注册双击事件,或让一个按钮或者其他元素上 ...

  2. ASPxGridView1单击,双击事件

    ASPxGridView1没有自带的单击,双击事件,所以要自己写,<script language="javascript" type="text/javascri ...

  3. JS - 解决鼠标单击、双击事件冲突问题(原生js实现)

    由于鼠标双击时每一次触发双击事件都会引起两次单击事件和一次双击事件,原生的js不提供专门的双击事件. 因为业务原因,双击和单机都绑定了不同的业务,在双击的时候又触发了单机,影响了页面的正常显示 出现问 ...

  4. 微信小程序实现单击、双击和长按、forEach、clearTimeout、setTimeout、split、setClipboardData、getClipboardData、showToast

    文章目录 1.前言 2.HTML部分 3.JavaScript部分 4.微信小程序演示 1.前言 本文章只针对JavaScript进行详解,不对HTML和css做解释,望悉知. 2.HTML部分 &l ...

  5. js单击、双击、连续多次点击

    文章目录 单击 双击 单击双击同时存在 连续多次点击 单击 原生javascript为我们提供了单击和双击(click 和 dblclick)两种点击事件的监听 var oBtn = document ...

  6. js中单击和双击事件的区分

    js中单击和双击事件的区分 1. 首先要了解鼠标点击(单击或双击)时包含的事件. mousedown 事件:   当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件.与 cl ...

  7. GridView/DataGrid行单击和双击事件实现代码_.Net教程

    功能: 单击选中行,双击打开详细页面  说明:单击事件(onclick)使用了 setTimeout 延迟,根据实际需要修改延迟时间 ;当双击时,通过全局变量 dbl_click 来取消单击事件的响应 ...

  8. 禁用CMFCRibbonApplicationButton的单击和双击事件

    为了禁用CMFCRibbonApplicationButton的单击和双击事件,我重载了CMFCRibbonApplicationButton如下: 1. MyRibbonApplicationBut ...

  9. Hbuilder 左侧项目栏文件打开方式(单击?双击?) - 设置篇

    Hbuilder 左侧项目栏文件打开方式(单击?双击?) - 设置篇 设置办法 · 截图演示 · 如下: 打开编辑器,工具栏找到"工具": 打开"工具"–> ...

最新文章

  1. Android ListViewDemo
  2. MySQL锁的用法之行级锁
  3. CSS-10-内边距
  4. SSM+mybatis单元测试
  5. 信息服务器为什么选择在贵州,为啥云服务器在贵州
  6. Eclipse4.2界面难看,启动速度,修改方法
  7. HDOJ 1227 DP
  8. JavaScript内置对象导读(1)
  9. 图像增强处理之:同态滤波与Retinex算法(三)Retinex邻域算法:SSR,MSR,MSRCR
  10. tcp/ip协议详解
  11. 利用Excel出库明细表批量生成送货单
  12. [ERP/鼎捷E10][销售分销]发出商品余额表取数逻辑及SQL
  13. maven打包报错failed: Unable to find a single main class from the following candidates []
  14. 【调试工具】【tc】Linux流量控制原理【转】
  15. 网络编程——CS模型(总结)
  16. LaTeX中文生僻字显示
  17. PWorld2016大会演讲PPT+访谈视频大合集,总有一款是你在找的!
  18. MATLAB进行不定积分和定积分的求解
  19. 【实战+源码】RGB-D移动抓取服务机器人(四)——完结篇(ROS机器人、系统设计、运动规划、目标定位)
  20. Emoji表情过滤-手机键盘emoji表情完全过滤

热门文章

  1. 简易php access文章管理系统,PHP+ACCESS 文章管理程序代码
  2. edittext在哪可以获取有效值_java-从EditText获取文本字符串?
  3. python版本可执行可嵌入_Python程序打包成exe可执行文件的方法探究
  4. C# 子类实例化基类 基类使用不了子类的方法_C#中的类、方法和属性
  5. 发现一个bug如何定位是前端还是后台问题?
  6. java获得当前路径_JAVA 取得当前目录的路径/Servlet/class/文件路径/web路径/url地址...
  7. ogg批量配置_Mac批量文件重命名A Better Finder Rename11.07直装
  8. Lenovo ThinkPad T系列解决 VMware Workstation 打开虚拟机提示:Intel VT-x处于禁用状态问题
  9. 停车场管理系统linux实现,基于Linux的停车场管理系统的设计与实现
  10. 打线上包 测试_vue-cli项目分别打测试包(test)和生产包(prod)