如何处理完整日历事件正文中的链接

Question

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

我需要在我的事件正文中放置一个删除链接（在日期、标题下方......我使用 eventRender 做到了这一点，我也在其中放置了我的事件描述。我的删除链接很简单

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

但我也使用了 eventClick ：当我单击一个事件时，会出现一个带有版本表单的模态框。

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

我在链接单击事件中添加了一个小侦听器，并尝试为此事件停止传播（），但由于事件单击首先触发，因此它不起作用：

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

我在这里误解了什么吗？什么是处理链接和事件点击的好解决方案 全日历 2 ？

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();行。