使用角度日历拖放事件时防止 eventClick 触发答案

【问题标题】：Preventing eventClick trigger when drag and dropping events using angular-calendar使用角度日历拖放事件时防止 eventClick 触发
【发布时间】：2021-01-22 17:01:37
【问题描述】：

当我的事件既可拖动又可点击时，我使用角度日历对 (eventClicked) 和 (eventTimesChanged) 的当前绑定存在问题。

注意：这种行为似乎发生在 Firefox v84.0.2 而不是 Chrome v87.0.4280.88

将一个事件从一个时隙拖到另一个时隙有时会触发 eventTimesChanged AND eventClicked，而此时只有第一个是预期的。

出现这种情况：

观看DAY，每次
在视图 WEEK 上，如果您将事件拖到同一天

使用this stackblitz sandbox 并按照以下场景，您可以了解该行为：

在查看 WEEK 时，单击事件。控制台按预期输出 eventClicked
在查看 WEEK 时，将事件从一天拖到另一天。控制台按预期输出 eventTimesChanged
在查看 WEEK 时，将事件从一天拖到其自身（通过将其放置在同一天的另一个时间段上）。控制台按预期输出 eventTimesChanged，但也输出不需要的 eventClicked
在查看 DAY，单击事件。控制台按预期输出 eventClicked
在查看 DAY 时，将事件拖到另一个时间段。控制台按预期输出 eventTimesChanged，但也输出不需要的 eventClicked

有什么方法可以在同一天拖放后阻止此 eventClicked 触发器？我觉得事件检测认为同一天的一个事件上的鼠标单击+鼠标单击将始终被视为单击，即使单击鼠标时事件的时隙与单击时的时隙不同释放鼠标时的事件。

我觉得在鼠标单击和鼠标释放之间添加一种“延迟检测”来定义是否应将其视为单击或事件的“按住然后释放”应该足以作为一种解决方法，但是我不知道怎么把它放在一起。

提前谢谢你

【问题讨论】：

标签： angular events angular-calendar

【解决方案1】：

这是我想出的解决方法。不确定它的性能，但它正在工作：修改具有角度日历的组件执行这 3 点

添加一个 BehaviorSubject eventHasChangedSubject 来跟踪最近是否有拖放事件
通过将 true 推送到此主题来启动您的 (eventTimesChanged) 绑定方法，并在操作结束时以 1 毫秒的超时时间推送 false
将 (eventClicked) 绑定方法的当前内容封装在 if (!this.eventHasChangedSubject.value) 中

export class MyClassContainingCalendarBindedMethods {

  private eventHasChangedSubject = new BehaviorSubject<boolean>(false);

  eventTimesChanged(event: CalendarEventTimesChangedEvent): void {
    this.eventHasChangedSubject.next(true);
    yourCurrentEventTimesChangedCode();
    setTimeout(() => this.eventHasChangedSubject.next(false), 1);
  }
  
  eventClicked({ event }: { event: CalendarEvent }): void {
    if (!this.eventHasChangedSubject.value) {
      yourCurrentEventClickedCode();
    }
  }

}

【讨论】：