jquery - Fullcalendar 和 Bootstrap : Callbacks work for . modal() 但不是 .dropdown ('toggle' )

Question

我正在构建一个日历应用程序，并且希望当用户拖动时间选择或单击一天中的某个时间时触发上下文菜单。 (在绝对定位于 jsEvent.pageX,jsEvent.pageY 的元素上使用 Bootstrap 的 .dropdown())。

不幸的是，有一个问题 - 下拉菜单似乎无法正确触发。奇怪的是 .modal() 完美触发。

我的假设是，Fullcalendar 用于监听和捕获事件以确认/呈现用户选择的代码会阻止 Bootstrap 正确触发，但为什么 .modal() 不会失败，因为嗯？

非常感谢任何帮助。

jsFiddle:http://jsfiddle.net/sqjz558x/

function eventCreate(start, end, jsEvent, view) {
  // Works 
  //$('.modal-new-event').modal(); 

  // Doesn't work, notice highlighting of button during drag
  $('.dropdown-toggle').dropdown('toggle'); 

  // Works but is unreliable (using unselect handler)
  //$('.dropdown-menu').toggle(); 
}

$(document).ready(function() {
    $('#calendar').fullCalendar({
        defaultView: 'agendaWeek',
        selectable: true,
        select: function (start, end, jsEvent, view) {
          return eventCreate(start, end, jsEvent, view); 
        },      
        dayClick: function (date, jsEvent, view) { 
          return eventCreate(date, null, jsEvent, view); 
        },
        unselect: function (view, jsEvent) { 
         // $('.dropdown-menu').toggle();
        }       
    })
});

Answer 1

只需停止日历中的事件传播:

document.getElementById("calendar").addEventListener("click", function (e) {
    e.stopPropagation();
});

查看工作 JSFiddle

原始点击事件正在打开下拉列表。然后该事件传播、再次触发并关闭下拉列表。 e.stopPropagation(); 将阻止这种行为。