单击双击事件一同使用

最新推荐文章于 2023-07-05 17:07:01 发布

AI智汇驿站

最新推荐文章于 2023-07-05 17:07:01 发布

阅读量984

点赞数

分类专栏：前端路上遇到的一些坑文章标签： javascript

本文链接：https://blog.csdn.net/Nonsense_man/article/details/107409193

版权

前端路上遇到的一些坑专栏收录该内容

24 篇文章 0 订阅

订阅专栏

1.echarts 单击双击同时使用

click 和dbl click 冲突所以没办法同时实现两种点击效果最后使用setTimeout 模拟单击双击

var g_clickTime=null;
var g_TimeFn = null;
var g_onItemName = null;
//单双击
myChart.on('click', function (e) {
 var myDate = new Date();
 if (g_clickTime == null){
   //第一次进来
   g_clickTime = myDate.getMilliseconds();
   g_onItemName = e.name;
   //起一个定时器，进行重置
   g_TimeFn = setTimeout(function(){
     //要执行的代码
     g_clickTime=null;
     
   },300);
 }else{
   clearTimeout(g_TimeFn);
   //第二次进来，
   if( Math.abs(myDate.getMilliseconds()-g_clickTime) < 300 && g_onItemName == e.name){
     //是双击操作
     console.log(e);
     
   }
   g_clickTime=null;
 }
});

2.vue 元素单击双击同时使用

data:{
	clickTimes:0,//单击计数
}
this.clickTimes++;
if (this.clickTimes === 2) { //当点击次数为2
    this.clickTimes = 0; //记得清零
	//  触发双击事件...
    
}
let _this = this
setTimeout(function () {
    if (_this.clickTimes === 1) {
    _this.clickTimes = 0; // 单击清零
    //  触发单击事件...
   
}, 300)