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();确实如此。

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

2 个答案: