// 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. 简单模拟IOC容器:为添加了@Autowired的属性赋值(初始值)

    创建@Autowired注解 package com.zzj.test; import java.lang.annotation.ElementType; import java.lang.annot ...

  2. PHP连数据库生成数据字典

    <?php /** * 生成mysql数据字典 */ header("Content-type:text/html;charset=utf-8"); // 配置数据库 $da ...

  3. 51nod 1009:数字1的数量

    1009 数字1的数量 基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题  收藏  关注 给定一个十进制正整数N,写下从1开始,到N的所有正数,计算出其中出现所有1的个 ...

  4. day03-Python运维开发基础-(数据类型强转、运算符、逻辑短路、isinstance)

    1. 强制转换成容器数据类型 # ### 强制类型转换 容器类型数据 (str list tuple set ) var1 = "你好世界" var2 = ["陈博文&q ...

  5. VUE - vue.runtime.esm.js?6e6d:619 [Vue warn]: Do not use built-in or reserved HTML elements as component i

    <script> export default {     name:'header'       //  不要使用内置或保留的HTML元素 , 改为Header或者置或保留的HTML元素 ...

  6. JS写一个旋转木马的视频播放效果

    JS以及JQ的功能很强大,可以做出很多的优秀效果.今天给大家分享一个我之前写网站用到的旋转木马效果. 大概效果图就是这样的,上面的视频播放是旋转木马效果. 下面的音乐播放效果放在下一篇内容里面讲. 直 ...

  7. C++的bitset(位操作使用),转载

    有些程序要处理二进制位的有序集,每个位可能包含的是0(关)或1(开)的值.位是用来保存一组项或条件的yes/no信息(有时也称标志)的简洁方法.标准库提供了bitset类使得处理位集合更容易一些.要使 ...

  8. eshop5-maven 安装

    1. Maven 安装 2.下载地址:https://mirrors.tuna.tsinghua.edu.cn/apache/maven/maven-3/3.0.5/binaries/ 3. 通过ta ...

  9. 0109 springboot的部署测试监控

    springboot的部署测试监控 部署 基于maven 打包 JAR 打包方式一般采用的jar包,使用springboot的默认方式即可: 使用maven命令: mvn clean package ...

  10. spring boot rest api exception解决方案

    1.控制器级别@ExceptionHandler public class FooController{           //...     @ExceptionHandler({ CustomE ...