规避cesium中 双击事件会触发单击事件

在 Cesium 中，双击事件（doubleClick）会触发单击事件（click），主要因为浏览器的事件机制导致。当用户双击时，浏览器会先触发两次 click 事件，然后再触发一次 doubleClick 事件。

方法 1：使用延时判断

通过设置一个延时来判断是否是双击事件。如果在短时间内触发了两次点击事件，则认为是双击事件，忽略第一次单击事件。

const viewer = new Cesium.Viewer("cesiumContainer");

let clickTimeout = null; // 用于存储单击事件的定时器
const doubleClickDelay = 300; // 双击事件的判定时间（单位：毫秒）

// 监听单击事件
viewer.screenSpaceEventHandler.setInputAction((click) => {
  // 如果已经有定时器，说明可能是双击事件，清除定时器并忽略单击事件
  if (clickTimeout) {
    clearTimeout(clickTimeout);
    clickTimeout = null;
    return;
  }

  // 设置定时器，延迟执行单击事件
  clickTimeout = setTimeout(() => {
    console.log("单击事件");
    clickTimeout = null; // 重置定时器
  }, doubleClickDelay);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

// 监听双击事件
viewer.screenSpaceEventHandler.setInputAction((doubleClick) => {
  // 清除单击事件的定时器
  if (clickTimeout) {
    clearTimeout(clickTimeout);
    clickTimeout = null;
  }

  console.log("双击事件");
}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

方法 2：使用标志位

const viewer = new Cesium.Viewer("cesiumContainer");

let isDoubleClick = false; // 标志位，判断是否是双击事件
const doubleClickDelay = 300; // 双击事件的判定时间（单位：毫秒）

// 监听单击事件
viewer.screenSpaceEventHandler.setInputAction((click) => {
  if (isDoubleClick) {
    // 如果是双击事件，忽略单击事件
    isDoubleClick = false;
    return;
  }

  // 设置定时器，延迟执行单击事件
  setTimeout(() => {
    if (!isDoubleClick) {
      console.log("单击事件");
    }
  }, doubleClickDelay);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

// 监听双击事件
viewer.screenSpaceEventHandler.setInputAction((doubleClick) => {
  isDoubleClick = true; // 标记为双击事件
  console.log("双击事件");
}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

方法 3：禁用默认的双击事件

const viewer = new Cesium.Viewer("cesiumContainer");

// 禁用默认的双击事件
viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

// 监听单击事件
viewer.screenSpaceEventHandler.setInputAction((click) => {
  console.log("单击事件");
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);