javascript实现单击和双击并存的方法

前端技术 2023/09/09 JavaScript

本文实例讲述了javascript实现单击和双击并存的方法。分享给大家供大家参考。具体分析如下：

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

复制代码 代码如下:
<HTML>
  <HEAD>
  <TITLE> javascript 实现单击和双击并存 </TITLE>
  <META NAME=\" Generator\" CONTENT=\" EditPlus\" >
  <META NAME=\" Author\" CONTENT=\" http://www.phpstudy.net/\" >
  <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>

本文地址：https://www.stayed.cn/item/25420

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案