JS - 解决鼠标单击、双击事件冲突问题(同时实现两种事件响应)

1,问题描述

如果想让一个  DOM  对象既可以被单击,也可以被双击,可以在该对象上同时绑定单击( click )和双击( dblclick )事件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
  
     "utf-8" >
    
    
  
   "onload()" >
  

(1)测试了下单击是没问题的,控制台输出如下:
JS - 解决鼠标单击、双击事件冲突问题(同时实现两种事件响应)_第1张图片

(2)但如果是双击会发现,除了触发双击事件,在双击事件之前还会连续触发两次单击事件:
JS - 解决鼠标单击、双击事件冲突问题(同时实现两种事件响应)_第2张图片

2,解决办法

通过设置两次点击事件的间隔时间( setTimeout 方法),来实现双击、单击事件并存。
  • 单击后不立刻执行相关的代码,而是让其延时执行(比如:200ms
  • 如果随后发生了双击事件,则取消延时执行的方法,只执行双击事件方法。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
  
     "utf-8" >
    
    
  
   "onload()" >
  

再次双击,可以发现不会再执行单击的方法了。
JS - 解决鼠标单击、双击事件冲突问题(同时实现两种事件响应)_第3张图片

原文出自: www.hangge.com   转载请保留原文链接: http://www.hangge.com/blog/cache/detail_1794.html

你可能感兴趣的:(javascript)