Question

我正在使用Fullcalendar (docs)

开发日历

当选择空时隙时，我想显示一个上下文菜单，如下所示：（不要介意造型）

select: function(start, end, jsEvent){    
    $("#calendarContextMenu").css({
        display: "block",
        left: jsEvent.pageX + 4,
        top: jsEvent.pageY - 16
    });
}

在点击任何其他内容时隐藏它：

$(document).click(function(){
    $("#calendarContextMenu").hide();
});

jsFiddle

这很有效，但是当选择了较长的时间段时，上下文菜单不会显示。我注意到这是因为$(document).click()是在fullcalendar的select回调之后直接触发的。我该怎么办才能解决这个问题？似乎有某种事件正在冒泡。当然，我们总是欢迎其他解决方案。

注意：有一个div .fc-content-skeleton导致了我认为的问题。

Answer 1

尝试：

$(document).click(function(){
   console.log('hide');

    $("#calendarContextMenu").show();
});

Answer 2

我更新了您的代码并添加了eventClick侦听器。请点击此处：http://jsfiddle.net/e6v3mkjo/4/

更新1 ：

将eventClick更改为dayClick

http://jsfiddle.net/e6v3mkjo/5/

请检查他们的文档：http://fullcalendar.io/docs/

更新2 ：

哈哈，我意识到我没有理解这个问题。真正问题的解决方案很简单：删除文档点击处理程序，然后添加unselect处理程序。

unselect: function() {
  $("#calendarContextMenu").hide();
}

在fullcalendar select回调中停止传播

2 个答案: