// timer为全局变量
getClickEmail1(_type) {
clearTimeout(this.timer);
if (_type == 1) {
if (event.detail == 2) return;
this.timer = setTimeout(function() {
console.log("单击");
}, 300);
} else {
console.log("双击");
}
}

html如下:

<span
@click="getClickEmail1(1)"
@dblclick="getClickEmail1(2)"
>点我</span>

单击:用户单击触发 getClickEmail1(1) 函数,清除定时器这个先不管,if里的意思是如果在同样的地方执行同种方法两次,也就是双击的意思,退出这个函数,单击不会触发if。下来给定时器赋值,300ms后执行输出单击的这句话,如果单击的话就不会在300ms里触发其他事件,所以单击解释完毕。

双击:用户双击触发两次click和一次dbclick。第一次先执行aa函数,因为这是第一次所以不会return,300ms之间还没有等单击这两个字输出便再次触发了aa函数,次数记为两次,return出去,之后触发bb函数,输出双击两个字。

js实现鼠标单击或者双击事件的更多相关文章

  1. JS - 解决鼠标单击、双击事件冲突问题(原生js实现)

    由于鼠标双击时每一次触发双击事件都会引起两次单击事件和一次单击事件,原生的js不提供专门的双击事件. 因为业务原因,双击和单机都绑定了不同的业务,在双击的时候又触发了单机,影响了页面的正常显示 出现问 ...

  2. 支持行单击、双击事件的GridView和DataList控件(译)

    支持行单击.双击事件的GridView和DataList控件(译)         让GridView 和 DataList 控件响应鼠标单击.双击事件.并且,使用 ClientScript.Regi ...

  3. jquery处理单击和双击事件

    今天做div点击时,需要用到同一div的单击和双击事件,出现问题如下 例子: Html <body> <div id="div_1">单击双击我</d ...

  4. unity3D 游戏物体同时绑定单击、双击事件

    前言 在unity中我们常用的获取鼠标点击的方法有 在3D场景中,一般用在Update方法中,每一帧调用 void Update(){ )){ Debug.log("鼠标左键点击" ...

  5. GridView/DataGrid行单击和双击事件实现代码_.Net教程

    功能: 单击选中行,双击打开详细页面 说明:单击事件(onclick)使用了 setTimeout 延迟,根据实际需要修改延迟时间 ;当双击时,通过全局变量 dbl_click 来取消单击事件的响应  ...

  6. 禁用CMFCRibbonApplicationButton的单击和双击事件

    为了禁用CMFCRibbonApplicationButton的单击和双击事件,我重载了CMFCRibbonApplicationButton如下: 1. MyRibbonApplicationBut ...

  7. Android 自定义View实现单击和双击事件

    自定义View, 1. 自定义一个Runnable线程TouchEventCountThread ,  用来统计500ms内的点击次数 2. 在MyView中的 onTouchEvent 中调用 上面 ...

  8. [Javasript] 同时实现单击和双击事件

    在同一个元素上同时绑定单击和双击事件: JavaScript <script type="text/javascript"> var timer = 0; var de ...

  9. [转] Ext Grid (ExtJs)上的单击以及双击事件

    例1: 1.双击 var cb = new Ext.grid.RowSelectionModel({ singleSelect:true //如果值是false,表明可以选择多行:否则只能选择一行 } ...

随机推荐

  1. PAT A1025 pat ranking

    有n个考场,每个考场都有若干数量个考生,现给出各个考场中考生的准考证号和分数,要求将所有考生的分数从高到低排序,并输出 #include<iostream> #include<str ...

  2. webpack配置自动打包重新运行npm run dev出现报错

    webpack配置自动打包重新运行npm run dev出现报错 运行npm run dev出现如下报错 Listening at http://localhost:8080(node:2328) U ...

  3. Linux环境安装Golang

    命令行安装 yum install golang 默认安装目录/usr/lib/golang/  (不同系统不一样,可通过搜索golang关键字查找: find / -name golang) 卸载 ...

  4. VS 项目没有“添加引用”选项

    出问题的环境:vs2017,unity2017unity创建工程后,vs打开项目后,无法添加引用dll,没有“添加引用”项原因: 需要把目标框架改为.

  5. python符号//、%和/运算

    a = 9 print('这是%运算的结果'+str(a%2)) print('这是//运算的结果'+str(a//2)) print('这是/运算的结果'+str(a/2))运算结果为 这是%运算的 ...

  6. Lesson 45 Of men and galaxies

    In man's early days, competition with other creatures must have been critical. But this phase of our ...

  7. 织梦 dede runphp=yes SQL语句操作

    个人实例dede:channelartlist 下循环出 channel 栏目 中的 文章 {dede:sql sql='select * from dede_arctype where reid = ...

  8. 连接数据库 - (mysql-thinkphp) (2)

    1.现在conf里面写好选择的数据库 选择好了以后 2.在index里面输入 查询mysql数据库里面的表tables_priv的所有数据 public function index() { $res ...

  9. P1087 有多少不同的值

    P1087 有多少不同的值 转跳点:

  10. k8s 各种网络方案【转】

    网络模型有了,如何实现呢? 为了保证网络方案的标准化.扩展性和灵活性,Kubernetes 采用了 Container Networking Interface(CNI)规范. CNI 是由 Core ...