Full Calendar列表视图添加按钮无点击效果问题排查

我在FullCalendar列表视图中给事件添加了带切换功能的按钮（示例代码如下），但所有按钮都无法正常触发点击事件，只会触发全局的eventClick打开编辑弹窗。已经通过z-index把按钮层级设得比事件层高1级，togglePublic函数也已准备完成。

原代码：

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)

问题根源 #

1. Vue指令未被编译：使用了Vue的(click)指令，但通过innerHTML插入的DOM元素不会被Vue编译器处理，点击指令完全无效。
2. 事件冒泡触发全局点击：即使设置了z-index，点击按钮时事件会向上冒泡到FullCalendar的事件容器，最终触发eventClick回调。

解决方案 #

方案一：原生JS绑定点击事件（推荐）

直接用原生JS创建按钮并绑定点击逻辑，同时阻止事件冒泡，避免触发全局的eventClick：

eventContent: (arg) => {
  let paragraph = document.createElement('div');
  let publicDiv = document.createElement('div'); // 避开JS保留关键字public

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

  // 创建按钮元素
  const toggleBtn = document.createElement('button');
  toggleBtn.style.width = '36px';
  toggleBtn.style.height = '36px';
  toggleBtn.style.border = '0';
  toggleBtn.style.borderRadius = '18px';
  toggleBtn.style.color = 'white';
  toggleBtn.innerHTML = '<i class="material-icons">public</i>';

  // 根据事件状态设置按钮样式
  toggleBtn.style.backgroundColor = arg.event.extendedProps.public ? 'green' : 'red';

  // 绑定点击事件并阻止冒泡
  toggleBtn.addEventListener('click', (e) => {
    e.stopPropagation(); // 阻止事件冒泡到父级事件容器
    this.togglePublic(arg.event.id); // 执行切换逻辑
  });

  publicDiv.appendChild(toggleBtn);
  paragraph.appendChild(publicDiv);

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

方案二：在eventClick中判断点击目标

如果不想修改eventContent的实现，可以在全局eventClick回调里判断点击的元素是否为按钮，针对性执行逻辑：

eventClick: (info) => {
  // 检查点击目标是否是按钮或按钮的子元素
  const targetBtn = info.target.closest('button');
  if (targetBtn) {
    this.togglePublic(info.event.id);
    return; // 跳过编辑弹窗逻辑
  }
  this.openEditEventDialog(info);
}

注意事项 #

• 避免使用public作为变量名，它是JavaScript的保留关键字，可能导致潜在语法问题。
• e.stopPropagation()是阻止冒泡的核心，确保按钮点击不会触发父级的eventClick。

内容的提问来源于stack exchange，提问作者meDom