使用 angular-calendar 在拖放事件时防止 eventClick 触发

Question

当我的事件既可拖动又可点击时，我对使用 angular 日历的 (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 触发器吗？我觉得事件检测认为同一天在一个事件上的鼠标按下+鼠标单击将始终被视为单击，即使单击鼠标时事件的时间段与的时间段不同鼠标点击松开时的事件。

我想在鼠标单击和鼠标释放之间添加一种“延迟检测”，以定义是否应将其视为单击事件或事件的“按住然后释放”作为解决方法就足够了, 但我不知道如何把它们放在一起。

提前致谢

Answer 1

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

添加一个 BehaviorSubject 事件 HasChangedSubject 来跟踪最近是否有事件被拖放
通过将 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();
    }
  }

}

使用 angular-calendar 在拖放事件时防止 eventClick 触发

Preventing eventClick trigger when drag and dropping events using angular-calendar

events

angular

angular-calendar