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


Posted in Javascript onDecember 13, 2014

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

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

<HTML> 

  <HEAD> 

  <TITLE> javascript 实现单击和双击并存 </TITLE> 

  <META NAME=" Generator" CONTENT=" EditPlus" > 

  <META NAME=" Author" CONTENT=" https://3water.com/" > 

  <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>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
js 获取浏览器高度和宽度值(多浏览器)
Sep 02 Javascript
JavaScript中把数字转换为字符串的程序代码
Jun 19 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
Nov 05 Javascript
纯javascript实现自动发送邮件
Oct 21 Javascript
利用js+css+html实现固定table的列头不动
Dec 08 Javascript
jQuery、zepto、js常用小技巧
Feb 12 Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 Javascript
Vue-Router实现组件间跳转的三种方法
Nov 07 Javascript
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
如何理解Vue的v-model指令的使用方法
Jul 19 Javascript
基于Vue 撸一个指令实现拖拽功能
Oct 09 Javascript
在JavaScript中如何使用宏详解
May 06 Javascript
Javascript数组与字典用法分析
Dec 13 #Javascript
jQuery实现表单提交时判断的方法
Dec 13 #Javascript
js实现iframe跨页面调用函数的方法
Dec 13 #Javascript
javascript里使用php代码实例
Dec 13 #Javascript
jQuery使用height()获取高度需要注意的地方
Dec 13 #Javascript
js与css实现弹出层覆盖整个页面的方法
Dec 13 #Javascript
jQuery对于显示和隐藏等常用状态的判断方法
Dec 13 #Javascript
You might like
一个更简单的无限级分类菜单代码
2007/01/16 PHP
php DES加密算法实例分析
2019/09/18 PHP
Yii框架的redis命令使用方法简单示例
2019/10/15 PHP
javascript 动态参数判空操作
2008/12/22 Javascript
js过滤数组重复元素的方法
2010/09/05 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
2015/11/17 Javascript
纯JS代码实现气泡效果
2016/05/04 Javascript
用JS写的一个Ajax库(实例代码)
2016/08/06 Javascript
几行js代码实现自适应
2017/02/24 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
2017/06/12 Javascript
微信小程序 循环及嵌套循环的使用总结
2017/09/26 Javascript
node通过express搭建自己的服务器
2017/09/30 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
2018/03/07 Javascript
Three.JS实现三维场景
2018/12/30 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
JavaScript Image对象实现原理实例解析
2020/08/26 Javascript
Python多进程编程技术实例分析
2014/09/16 Python
Python中的作用域规则详解
2015/01/30 Python
由浅入深讲解python中的yield与generator
2017/04/05 Python
Python使用POP3和SMTP协议收发邮件的示例代码
2019/04/16 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
Python谱减法语音降噪实例
2019/12/18 Python
Python-split()函数实例用法讲解
2020/12/18 Python
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
迪卡侬印度官网:购买所有体育用品
2017/06/24 全球购物
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
国际花店:Pickup Flowers
2020/04/10 全球购物
演讲稿开场白台词
2014/08/25 职场文书
六一领导慰问欢迎词
2015/01/26 职场文书
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang