来实现双击和单击的操作的区别

最新推荐文章于 2021-01-13 00:35:11 发布

taiciji999

最新推荐文章于 2021-01-13 00:35:11 发布

阅读量578

点赞数

分类专栏： javascript

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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" type ="text/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>