threejs 拖拽事件会触发点击事件_three防止拖拽触发点击事件

记录three中拖拽场景会触发click事件

解决方法

 dragNoClick = () => {

  const lock = (e) => {

   //获取相机位置

   this.lockStart = this.map.controls.target.clone();

  };

  const unlock = (e) => {

   const target = this.map.controls.target;

   //起始点距离小于0.1认为是没有挪动 点击事件

   if (!this.lockStart || this.lockStart.distanceTo(target) > 0.1) {

​    this.lockTiles = false;

   } else {

​    //点击事件

​    this.lockTiles = true;

   }

  };

  const controls = this.map.controls;

  controls.addEventListener("start", lock);

  controls.addEventListener("end", unlock);

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

绑定事件

//t===事件名称 fn===回调
handleEvent = (t, fn) => {
    this.map.on(t, (e) => {
      if (e.length <= 0) {
        return;
      }

      //点击事件 区别拖拽事件
      if (t === "click") {
        if (this.lockTiles) {
          fn(e);
        }
      } else {
        fn(e);
      }
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16