完整日历和引导:回调适用于.modal()，而不是.dropdown(“切换”)

Question

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

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

我的假设是，完整日历用于侦听和捕获事件以确认/呈现用户选择的代码阻止了引导带正确触发，但是为什么.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

原始单击事件正在打开dropdown。然后该事件传播，再次触发并关闭dropdown。e.stopPropagation();将防止这种行为。

Answer 2

您遇到的问题是，在选择(或在日历中单击)之后，完整日历触发了click事件，这是一个问题，因为引导程序的下拉列表的hide函数绑定到$(document).click()。

这里实际发生的情况是显示下拉菜单，但在此之后，由于单击document的触发器，下拉菜单立即被隐藏。

不是一个好的解决方案(但它有效)--您可以解除对文档的单击：$(document).unbind(' click ')； 真的不推荐你，因为你不知道你要捣乱什么，但它很管用 (真的，检查一下！)

您可以看到，我也确保切换到unselect上的下拉菜单。

一个更好的解决方案是检查何时我们真的需要关闭下拉列表，而下拉列表即将隐藏，但不应该-阻止它被隐藏。为了做到这一点，我们需要一个新的变量来告诉我们是否需要打开下拉列表：

• 当选择完成时-我们需要打开它
• 当取消选择时-关闭它是可以的

这样--即使日历触发了$(document).click()事件--因为我们知道我们处于select状态，所以我们不应该隐藏菜单：

var keepDropdownOpen = false;

$('#calendar').fullCalendar({
    defaultView: 'agendaWeek',
    selectable: true,
    select: function (start, end, jsEvent, view) {
        // On select - keep the dropdown open
        keepDropdownOpen = true;
        return eventCreate(start, end, jsEvent, view); 
    },      
    dayClick: function (date, jsEvent, view) { 
        //return eventCreate(date, null, jsEvent, view); 
    },
    unselect: function (view, jsEvent) { 
        // On unselect - no need to keep the dropdown open
        keepDropdownOpen = false;
        $('.dropdown-toggle').dropdown('toggle');
    }
});
$('.dropdown').on('hide.bs.dropdown', function (e) {
    // If we should keep the dropdown open - just return false
    if (keepDropdownOpen) {
        return false;
    }
    return true;
})

工作示例：https://jsfiddle.net/5yx4z534/

Answer 3

实际上，它被触发了两次:选择也会生成单击事件，因此eventCreate()被调用了两次，因此下拉列表被切换了两次，返回到原来的状态。

如果您注释掉了在单击事件中调用eventCreate()，那么单击和选择都会按照您的预期工作(我认为)，因为当您单击单个单元格时，实际上是在执行单个单元格长度的选择。请参阅小提琴

dayClick: function (date, jsEvent, view) { 
    ////return eventCreate(date, null, jsEvent, view); 
},

我观察到的...What是，第二次单击再次触发相同的事件(在我看来是正确的)，但第三次没有触发。但我认为这是关于fullCalendar插件内部..。

另外，请注意，当下拉菜单打开时，单击到不同的单元格会再次切换它，从而导致它被关闭而不是打开。因此，您可能最好使用一些(“打开”)函数(如果存在，我没有深入研究)或检查它的状态，然后再切换它。