如何在div丟失焦點時關閉div？

Question

我在這裏做一個簡單的plunkr http://plnkr.co/edit/zNb65ErYH5HXgAQPOSM0?p=preview

我創建了一個小日期選擇器，我想這當你專注出來的（事件的內容的日期選擇器），如果我把模糊輸入我無法使用日期選擇器本身關閉如果我把事件的內容事件的日期選擇器不工作

我也試過：

angular.element(theCalendar).bind('blur', function() { 
    $scope.hideCalendar(); 
}); 

，但它不工作。

任何線索？

Answer 1

所以，我知道這可能不是最好的做法還是要做到這一點的最好辦法，但最後我固定，並得到了什麼，我需要使用這樣的：

thisInput.bind('focus click', function bindingFunction() { 

      isMouseOnInput = true; 
      $scope.showCalendar(); 
      angular.element(theCalendar).triggerHandler('focus'); 
     }); 
     thisInput.bind('blur focusout', function bindingFunction() { 

      isMouseOnInput = false; 
     }); 

     angular.element(theCalendar).bind('mouseenter', function() { 

      isMouseOn = true; 
     }); 

     angular.element(theCalendar).bind('mouseleave', function() { 

      isMouseOn = false; 
     }); 

     angular.element($window).bind('click', function() { 

      if (!isMouseOn && !isMouseOnInput) { 

      $scope.hideCalendar(); 
      } 
     }); 

我設置了一些布爾變量來檢查鼠標在你點擊頁面時的位置，如果你有一些更好的解決方案可以工作，它就像一個魅力，請讓我知道，但這實際上是固定的。

我接受這個答案，但我感謝這個頁面上的所有人！

Answer 2

這是因爲你刪除的項目，你有機會做任何事情之前，這裏是一個工作示例：

http://plnkr.co/edit/mDfV9NLAQCP4l7wHdlfi?p=preview

只需添加超時：

thisInput.bind('blur', function() { 
    $timeout(function(){ 
    $scope.hideCalendar(); 
    }, 200); 
}); 

有你考慮使用現有的日期選擇器？像angularUI或角帶：http://mgcrea.github.io/angular-strap/##datepickers

更新：

不是一個完整的解決方案，但應該讓你很接近：

angular.element($document[0].body).bind('click', function(e){ 
     console.log(angular.element(e.target), e.target.nodeName) 
     var classNamed = angular.element(e.target).attr('class'); 
     var inThing = (classNamed.indexOf('datepicker-calendar') > -1); 
     if (inThing || e.target.nodeName === "INPUT") { 
     console.log('in'); 
     } else { 
     console.log('out'); 
      $timeout(function(){ 
      $scope.hideCalendar(); 
      }, 200); 
     } 
    }); 

http://plnkr.co/edit/EbQl5xsCnG837rAEhBZh?p=preview

你想要做的又是什麼來聽取頁面上的點擊，如果點擊在日曆之外，請關閉它，否則什麼也不做。以上只考慮到您點擊某個類名包含datepicker-calendar的東西，您需要對其進行調整，以便日曆內的點擊不會將其關閉。

Answer 3

如何關閉mouseout？

您需要取消關閉，如果您在日曆中移動到另一個DIV雖然：

//get the calendar as element 
    theCalendar = element[0].children[1]; 

    // hide the calendar on mouseout 
    var closeCalendarTimeout = null; 
    angular.element(theCalendar).bind('mouseout', function() { 
     if (closeCalendarTimeout !== null) 
     $timeout.cancel(closeCalendarTimeout); 
     closeCalendarTimeout = $timeout(function() { 
     $scope.hideCalendar(); 
     },250) 
    }); 
    angular.element(theCalendar).bind('mouseover', function() { 
     if (closeCalendarTimeout === null) return 
     $timeout.cancel(closeCalendarTimeout); 
     closeCalendarTimeout = null; 
    }); 

編輯

添加的tabindex屬性來一個div導致其火焦點和模糊事件。

, htmlTemplate = '<div class="datepicker-calendar" tabindex="0">' +

angular.element(theCalendar).bind('blur', function() { 
    $scope.hideCalendar(); 
});