日期选择器上的事件 mouseout

Question

有人能解释一下这段代码是如何工作的吗

因为，我不知道我是否应该将代码放在插件文件中 或从页面上删除标题部分

还有什么需要注意的

代码来自http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerCloseMouseOut.html

提前感谢，理查德

（另外，我也不知道 wat cal 指的是什么，datePickerDiv 和 $('.date-pick')？）

 $(function() 
{ 
   var cal; 
   var $this; 

   var checkForMouseout = function(event) 
   { 
      var el = event.target; 

      while (true){ 
         if (el == cal) { 
            return true; 
         } else if (el == document) { 
            $this.dpClose(); 
            return false; 
         } else { 
            el = $(el).parent()[0]; 
         } 
      } 
   }; 

   $('.date-pick') 
      .datePicker() 
      .bind( 
         'dpDisplayed', 
         function(event, datePickerDiv) 
         { 
            cal = datePickerDiv; 
            $this = $(this); 
            $(document).bind( 
               'mouseover', 
               checkForMouseout 
            ); 
         } 
      ).bind( 
         'dpClosed', 
         function(event, selected) 
         { 
            $(document).unbind( 
               'mouseover', 
               checkForMouseout 
            ); 
         } 
      ); 

}); 

Answer 1

此代码将检查鼠标是否离开 datepicker div，如果鼠标离开则关闭它。代码通过检查接收事件的元素是否是日历来检查这一点。

//el is set above or below, call is set globally in the document.ready
while (true){ //this will loop forever until a return
     if (el == cal) { //is the receiving element the calender
        return true; //we return true (no ideo why true and not null or 'yaadada'
     } else if (el == document) { //we check if the target el is the document
        $this.dpClose();  //close the element
        return false; //return to leave loop
     } else { //el is neither the call or the document
        el = $(el).parent()[0]; //set el to the imidiate parent of the current el and reloop
     }
} 

您应该将此代码放在文档的开头。

这段代码更简单：

$('.date-pick') 
  .datePicker() 
  .bind( 
     'dpDisplayed', 
     function(event, datePickerDiv) 
     { 
        cal = datePickerDiv; //datepickerdiv should somehow hold the the datpicker div , something like: $('.date-pick')[0];
        $this = $(this); 
        $(cal).mouseleave( function() { $(this).dpClose(); });
     }
} 

一个更好的问题可能是，你为什么不包含你不知道它做什么的代码？

注意：这段代码非常难看，你应该考虑重写它。