如何处理 FullCalendar 事件正文中的链接？

Question

我在一个项目中使用 FullCalendar 2。我之前一直在使用它，我对它的 API 非常熟悉。

我需要在我的活动正文中放置一个删除链接（低于日期、标题...）。我使用eventRender 完成了它，我还在其中放置了我的事件描述。我的删除链接很简单

<a class="delete-event-link" href="...">delete</a>

但我也使用了eventClick：当我点击一个事件时，会出现一个带有编辑表单的模式框。

这是我的麻烦：当我点击我的删除链接时，eventClick 首先触发（所以我的模态显示），然后加载链接目标页面。

我在我的链接点击事件上添加了一个小监听器，并尝试stopPropagation() 处理此事件，但由于 eventClick 首先触发它不起作用：

$('#calendar-wrapper').on('click', '.delete-event-link', function(e) {
  console.log('link click');
  e.stopPropagation();
});

我在这里误解了什么吗？使用 FullCalendar 2 处理链接和 eventClick 的好解决方案是什么？

Answer 1

我可以通过将以下代码添加到eventRender 来获得结果：

$(element).find('.delete-event-link').click(function(e) {
    e.stopImmediatePropagation(); //stop click event, add deleted click for anchor link
    alert('deleted');
});

工作示例：

Date.prototype.addHours= function(h){
    this.setHours(this.getHours()+h);
    return this;
}

$('#fullCal').fullCalendar({
      events: [{
        title: 'Main Event 1',
        start: new Date(),
        end: (new Date()).addHours(2),
        allDay: false
      }, {
        title: 'Main Event 2',
        start: (new Date()).addHours(5),
        end: (new Date()).addHours(7),
        allDay: false,
      }],
      header: {
        left: '',
        center: 'prev title next',
        right: ''
      },
      timezone:'local',
      defaultView: 'agendaWeek',
      eventRender: function(event, element) {
        $(element).find('.fc-title').append('<br><a href="javascript:void(0);" class="delete-event-link">delete</a>');
      
        $(element).find('.delete-event-link').click(function(e) {
            e.stopImmediatePropagation(); //stop click event, add deleted click for anchor link
            alert('deleted');
        });
      },
      eventClick: function(event, element) {
        alert('clicked event');
      }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js"></script>

<div id="fullCal"></div>

Answer 2

对我来说 e.stopImmediatePropagation(); 不起作用，但 e.preventDefault(); 可以。