zoukankan      html  css  js  c++  java
  • javascript 实现单击和双击并存

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

  • 相关阅读:
    Ext架构分析(6)最简单的layout:AnchorLayout
    Ext架构分析(4)Container之旅
    ext学习资源汇总
    DomQuery v1.1 高级
    Ext 2.0 教程 目录
    HDOJ2006 ( 求奇数的乘积 ) 【水题】
    HDOJ2017 ( 字符串统计 ) 【水题】
    状态模式(State)
    HDOJ2002 ( 计算球体积 ) 【水题】
    HDOJ2007 ( 平方和与立方和 ) 【水题】
  • 原文地址:https://www.cnblogs.com/kungfupanda/p/1799260.html
Copyright © 2011-2022 走看看