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导入导出excel(实例代码)
Nov 25 Javascript
js脚本实现数据去重
Nov 27 Javascript
js 左右悬浮对联广告代码示例
Dec 12 Javascript
Vue数据驱动模拟实现1
Jan 11 Javascript
Angular2学习教程之ng中变更检测问题详解
May 28 Javascript
JavaScript实现二维坐标点排序效果
Jul 18 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 Javascript
Vue 莹石摄像头直播视频实例代码
Aug 31 Javascript
elementUI 设置input的只读或禁用的方法
Oct 30 Javascript
深入理解Vue keep-alive及实践总结
Aug 21 Javascript
vue登录以及权限验证相关的实现
Oct 25 Javascript
js实现单元格拖拽效果
Feb 10 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
解析关于java,php以及html的所有文件编码与乱码的处理方法汇总
2013/06/24 PHP
php版微信开发之接收消息,自动判断及回复相应消息的方法
2016/09/23 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
PHP+Oracle本地开发环境搭建方法详解
2019/04/01 PHP
PHP消息队列实现及应用详解【队列处理订单系统和配送系统】
2019/05/20 PHP
escape、encodeURI、encodeURIComponent等方法的区别比较
2006/12/27 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
2013/11/29 Javascript
window.print打印指定div实例代码
2013/12/13 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
2014/01/24 Javascript
详解JavaScript中Date.UTC()方法的使用
2015/06/12 Javascript
BootStrap入门教程(一)之可视化布局
2016/09/19 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
2016/11/01 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
2018/08/19 Javascript
ES6实现图片切换特效代码
2020/01/14 Javascript
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
2020/12/29 Javascript
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
python之wxPython应用实例
2014/09/28 Python
python中sleep函数用法实例分析
2015/04/29 Python
python如何通过protobuf实现rpc
2016/03/06 Python
python3实现windows下同名进程监控
2018/06/21 Python
python3 tkinter实现点击一个按钮跳出另一个窗口的方法
2019/06/13 Python
django的csrf实现过程详解
2019/07/26 Python
python GUI库图形界面开发之PyQt5打开保存对话框QFileDialog详细使用方法与实例
2020/02/27 Python
PyQt5 文本输入框自动补全QLineEdit的实现示例
2020/05/13 Python
Python实现Excel自动分组合并单元格
2021/02/22 Python
世界首屈一指的钓鱼用品商店:TackleDirect
2016/07/26 全球购物
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
yy结婚证婚词
2014/01/10 职场文书
公证书标准格式
2014/04/10 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
贫困证明书格式及范文
2014/10/15 职场文书
背起爸爸上学观后感
2015/06/08 职场文书