FullCalendar事件彈出

Question

在我的項目中使用awsome FullCalendar，我遇到了一個問題。

當用戶懸停一個事件時，我使用下面的代碼顯示一個包含菜單的DIV。

也能正常工作（問題與發現XY的事件是煩人）

我的問題是，當用戶通過DIV（菜單）將鼠標移動事件觸發一個eventMouseOut（因爲它應該） - 但這關閉了我的DIV。

如何在移除菜單之前檢查鼠標是否位於菜單內？

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>&nbsp;<?php echo _("Rediger vagt")?></li><li onClick='showEventMembers("+ eventid +");'><a><img border='0' style='' src='/images/icons/users.png'></a>&nbsp;<?php echo _("Vis tilmeldte")?></li><li onClick='emailEventMembers("+ eventid +");'><a><img border='0' style='' src='/images/icons/email.png'></a>&nbsp;<?php echo _("Skriv mail")?></li><li onClick='printShiftplan("+ eventid +");'><a><img border='0' style='' src='/images/icons/printer.png'></a>&nbsp;<?php echo _("Udskriv vagtplan")?></li><li onClick='deleteEvent("+ eventid +");'><a><img border='0' style='' src='/images/icons/bin_closed.png' ></a>&nbsp;<?php echo _("Slet vagt")?></li></ul></div>"; 
      $("body").append(layer); 

      console.log(jsEvent); 
     }, 
     eventMouseout: function(calEvent, domEvent) { 
      $("#events-layer").remove(); 
     }, 

對於醜陋的圖層（菜單），我很抱歉 - 不是最優雅的解決方案，但它現在可行。

總結一下問題：如何在使用eventMouseout刪除它之前檢查用戶是否實際瀏覽菜單？

Answer 1

嗨，你可以刪除層，當鼠標離開層，而不是刪除它當鼠標離開這樣的日曆格事件：

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>&nbsp;<?php echo _("Rediger vagt")?></li><li onClick='showEventMembers("+ eventid +");'><a><img border='0' style='' src='/images/icons/users.png'></a>&nbsp;<?php echo _("Vis tilmeldte")?></li><li onClick='emailEventMembers("+ eventid +");'><a><img border='0' style='' src='/images/icons/email.png'></a>&nbsp;<?php echo _("Skriv mail")?></li><li onClick='printShiftplan("+ eventid +");'><a><img border='0' style='' src='/images/icons/printer.png'></a>&nbsp;<?php echo _("Udskriv vagtplan")?></li><li onClick='deleteEvent("+ eventid +");'><a><img border='0' style='' src='/images/icons/bin_closed.png' ></a>&nbsp;<?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(); 
      } 
     },