FullCalendar事件弹出窗口 [英] FullCalendar event popup
问题描述
在我的项目中使用可怕的FullCalendar，我遇到了问题.
Using awsome FullCalendar on my project, I'm facing a problem.
当用户将事件悬停时，我将使用下面的代码显示一个包含菜单的DIV.
When the user hovers an Event, I display a DIV containing a menu using the code below.
这很好用(对于该事件，找到X Y很烦人)
This works fine (issues with finding X Y for the event is annoying)
我的问题是，当用户将鼠标移到DIV(菜单)上时，事件会触发eventMouseOut(应有)-但这会关闭我的DIV.
My problem is that when the user moves the mouse over the DIV (Menu) the Event fires a eventMouseOut (as it should) - but this closes my DIV.
在删除菜单之前，如何检查鼠标是否在菜单中?
How can I check if the mouse is inside the menu, before removing the menu ?
eventMouseover: function(event, jsEvent, view){
var eventid = event.id;
var layer = "<div id='events-layer' style='position:absolute; top:"+ jsEvent.pageY +"px; left:"+ jsEvent.pageX +"px; text-align:left; z-index:9999;background-color:#ffffff;padding-right:5px;cursor:pointer;width:100px;color:#000000;'><ul style='list-style-type: none;margin-left:0px;padding:0px;overflow:hidden;' onclick=''><li onClick='editEvent("+ eventid +");'><a><img border='0' style='' src='/images/icons/wrench.png'></a> <?php echo _("Rediger vagt")?></li><li onClick='showEventMembers("+ eventid +");'><a><img border='0' style='' src='/images/icons/users.png'></a> <?php echo _("Vis tilmeldte")?></li><li onClick='emailEventMembers("+ eventid +");'><a><img border='0' style='' src='/images/icons/email.png'></a> <?php echo _("Skriv mail")?></li><li onClick='printShiftplan("+ eventid +");'><a><img border='0' style='' src='/images/icons/printer.png'></a> <?php echo _("Udskriv vagtplan")?></li><li onClick='deleteEvent("+ eventid +");'><a><img border='0' style='' src='/images/icons/bin_closed.png' ></a> <?php echo _("Slet vagt")?></li></ul></div>";
$("body").append(layer);
console.log(jsEvent);
},
eventMouseout: function(calEvent, domEvent) {
$("#events-layer").remove();
},
对于丑陋的图层(菜单)，我感到抱歉-不是最优雅的解决方案，但它现在可以使用.
I'm sorry for the ugly layer (menu) - not the most elegant solution but it works for now.
总结问题:在eventMouseout中将其删除之前，如何检查用户是否正在导航菜单?
To summarize the question : How can I check if the user is actually navigating the menu, before removing it in eventMouseout ?
推荐答案
您可以在鼠标离开图层时删除该图层，而不是在鼠标离开日历div事件时将其删除:
Hi you can remove the layer when the mouse leave the layer instead of remove it when the mouse leave the calendar div event like this :
eventMouseover: function(event, jsEvent, view){
var eventid = event.id;
var layer = $("<div id='events-layer' style='position:absolute; top:"+ jsEvent.pageY +"px; left:"+ jsEvent.pageX +"px; text-align:left; z-index:9999;background-color:#ffffff;padding-right:5px;cursor:pointer;width:100px;color:#000000;'><ul style='list-style-type: none;margin-left:0px;padding:0px;overflow:hidden;' onclick=''><li onClick='editEvent("+ eventid +");'><a><img border='0' style='' src='/images/icons/wrench.png'></a> <?php echo _("Rediger vagt")?></li><li onClick='showEventMembers("+ eventid +");'><a><img border='0' style='' src='/images/icons/users.png'></a> <?php echo _("Vis tilmeldte")?></li><li onClick='emailEventMembers("+ eventid +");'><a><img border='0' style='' src='/images/icons/email.png'></a> <?php echo _("Skriv mail")?></li><li onClick='printShiftplan("+ eventid +");'><a><img border='0' style='' src='/images/icons/printer.png'></a> <?php echo _("Udskriv vagtplan")?></li><li onClick='deleteEvent("+ eventid +");'><a><img border='0' style='' src='/images/icons/bin_closed.png' ></a> <?php echo _("Slet vagt")?></li></ul></div>");
layer.mouseenter(function(){
$(this).addClass("mouse_in");
})
layer.mouseleave(function(){
$(this).remove();
})
$("body").append(layer);
console.log(jsEvent);
},
eventMouseout: function(calEvent, domEvent) {
if(!$("#events-layer").hasClass('mouse_in')){
$("#events-layer").remove();
}
},
这篇关于FullCalendar事件弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
