增强型完整日历列表视图，带按钮，但点击没有效果

Question

我在完整的日历列表视图中添加了几个带有切换操作的按钮（仅显示下面的一个解释），但它们都不可单击。切换公共功能可用，我还通过 z-index 将高度设置为比事件点击层高 1 点。 仅触发事件点击操作。

eventContent: (arg) => {
      let paragraph = document.createElement('div');
      let public = document.createElement('div');

      paragraph.className = 'event';
      public.className = 'public';

      if (arg.event.extendedProps.public === true) {
        public.innerHTML = '<button style="width: 36px; height: 36px; background-color: green; color: white; border: 0; border-radius: 18px;" (click)="togglePublic(' + arg.event.id + ')"><i class="material-icons">public</i></button>';
      } else {
        public.innerHTML = '<button style="width: 36px; height: 36px; background-color: red; color: white; border: 0; border-radius: 18px;" (click)="togglePublic(' + arg.event.id + ')"><i class="material-icons">public</i></button>';
      }

      paragraph.appendChild(public);

      return { domNodes: [paragraph] };
    },
    eventClick: this.openEditEventDialog.bind(this)

Answer 1

有几种方法可以实现这一目标。

注意这些是原生 JS 示例，因为我不是 Angular 用户，但我希望您可以使用等效的 Angular 代码获得相同的行为，因为 Angular 只是构建在原生 JS 之上。

---

1. 使用

   onclick

   似乎会检测按钮内

   <i class="material-icons">

   的点击，因为这直接是用户单击的元素。

因此只需将

click

代码移到该元素上即可：

if (arg.event.extendedProps.public === true) {
  public.innerHTML = '<button style="width: 36px; height: 36px; background-color: green; color: white; border: 0; border-radius: 18px;"><i class="material-icons" onclick="togglePublic(' + arg.event.id + ');">public</i></button>';
} else {
  public.innerHTML = '<button style="width: 36px; height: 36px; background-color: red; color: white; border: 0; border-radius: 18px;"><i class="material-icons" onclick="togglePublic(' + arg.event.id + ');">public</i></button>';
}

演示：https://codepen.io/ADyson82/pen/BaeeyoZ

---

2. 您可以将外部事件侦听器添加到

   <i>

   - 它将需要使用委托事件处理，因为在添加侦听器之前可能不会呈现按钮。

这需要添加一个类和数据属性到

<i>

:

if (arg.event.extendedProps.public === true) {
  public.innerHTML = '<button style="width: 36px; height: 36px; background-color: green; color: white; border: 0; border-radius: 18px;"><i class="material-icons eventButton" data-id="' + arg.event.id + '">public</i></button>';
} else {
  public.innerHTML = '<button style="width: 36px; height: 36px; background-color: red; color: white; border: 0; border-radius: 18px;"><i class="material-icons eventButton" data-id="' + arg.event.id + '">public</i></button>';
}

然后是一个单独的事件监听器：

document.addEventListener("click", function(e) {
  if (e.target.classList.contains("eventButton")) {
    togglePublic(e.target.dataset.id);
  }
});

演示：https://codepen.io/ADyson82/pen/YzbbPgQ

---

3. 您可以使用

   eventClick

   回调来检测事件 HTML 中的哪个特定项目被单击。

这再次需要向

<i>

添加一个类 - 但不需要 data 属性，因为

eventClick

的参数已经可以为您提供事件 ID。

if (arg.event.extendedProps.public === true) {
  public.innerHTML = '<button style="width: 36px; height: 36px; background-color: green; color: white; border: 0; border-radius: 18px;"><i class="material-icons eventButton">public</i></button>';
} else {
  public.innerHTML = '<button style="width: 36px; height: 36px; background-color: red; color: white; border: 0; border-radius: 18px;"><i class="material-icons eventButton">public</i></button>';
}

然后是 eventClick 处理程序：

eventClick: (arg) => {
  if (arg.jsEvent.target.classList.contains("eventButton")) {
    togglePublic(arg.event.id);
  }
}

演示：https://codepen.io/ADyson82/pen/eYaaNwW

---

当然，如果您想处理事件 HTML 的任何其他部分上的单击事件，您可以对这些元素应用完全相同的原则。