javascript-在IE中的Angular Bootstrap Datepicker之外单击会引发“包含”错误

当我在IE中打开日期选择器框之外单击时,出现以下错误：

‘对象不支持属性或方法’包含’Bootstrap datepicker’

日期选择器不会关闭.我遇到了许多涉及修改Bootstrap源代码的修复程序,但我宁愿不走这条路. (IE没有包含方法)

我可以通过在顶级父div上调用此函数来解决此问题：

<div class="clearfix" ng-click="formClicked($event)">
  <div class="form-group required">
    <label for="shipTo">Ship-To #</label>
    <select id="shipTo" class="form-control input-sm" ng-model="model.orderInfo.accountId"></select>
  </div>
  <div class="col-md-6">
    <div class="form-group required">
      <label for="shipDate">Ship Date</label>
      <div class="input-group calendar-box">
        <input id="shipDate" ng-model="model.orderInfo.shipDate" min-date="model.shipDateMin" max-date="model.shipDateMax" class="form-control input-sm" ng-click="dateOpen($event, 'shipDateOpened')" type="text" datepicker-popup="{{model.datePickFormat}}" is-open="model.shipDateOpened" ng-change="setCancelDate()" ng-readonly="true" required>
        <div class="input-group-addon cursor-pointer calendar-icon" ng-click="dateOpen($event, 'shipDateOpened')"></div>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="form-group required">
      <label for="cancelDate">Cancel Date</label>
      <div class="input-group calendar-box">
        <input id="cancelDate" ng-model="model.orderInfo.cancelDate" min-date="model.cancelDateMin" max-date="model.cancelDateMax" class="form-control input-sm" ng-click="dateOpen($event, 'cancelDateOpened')" type="text" datepicker-popup="{{model.datePickFormat}}" is-open="model.cancelDateOpened" ng-change="checkCancelDate()" ng-readonly="true" required>
        <div class="input-group-addon cursor-pointer calendar-icon" ng-click="dateOpen($event, 'cancelDateOpened')"></div>
      </div>
    </div>
  </div>
</div>

函数看起来像这样：

$scope.formClicked = function($event){
    $log.debug('form clicked');
    $event.preventDefault();
    $event.stopPropagation();

    $scope.model.shipDateOpened = false;
    $scope.model.cancelDateOpened = false;
};

问题是,现在在我的移动视图上,当我尝试点击选择下拉菜单时,会触发此formClicked($event)函数,并且该函数不会打开.有没有更好的解决方案,或者有没有办法让我在桌面视图中有条件地渲染ng-click？

解决方法:

我相信这是导致问题的piece of code：

var documentClickBind = function(event) {
   var popup = $popup[0];
   var dpContainsTarget = element[0].contains(event.target);
   // The popup node may not be an element node
   // In some browsers (IE) only element nodes have the 'contains' function
   var popupContainsTarget = popup.contains !== undefined && popup.contains(event.target);
   if (scope.isOpen && !(dpContainsTarget || popupContainsTarget)) {
     scope.$apply(function() {
       scope.isOpen = false;
    });
  }
};

就像评论中所说的那样,就像MDN states一样,IE和Edge都没有Node.contains(),显然MS也没有实现它的计划(问题多次出现,例如this只是关闭了).所以polyfill将是永久解决此问题的方法：

if (!Node.prototype.contains) {
  Node.prototype.contains = function contains(node) {
    if (!(0 in arguments)) {
        throw new TypeError('1 argument is required');
    }
    do {
        if (this === node) {
            return true;
        }
    } while (node = node && node.parentNode);
    return false;
  }
}  

this的略微修改版本,最初基于this suggestion.

来源：https://www./content-1-528151.html