在IE浏览器中，点击Angular Bootstrap日期选择器之外会出现“contains”错误。

26 浏览
0 Comments

在IE浏览器中，点击Angular Bootstrap日期选择器之外会出现“contains”错误。

当我在IE中点击打开的日期选择框之外时，会出现以下错误：

'对象不支持属性或方法'contains' Bootstrap日期选择器'

日期选择器不会关闭。我遇到了许多修复方法，其中涉及修改Bootstrap源代码，但我更愿意不这样做（IE没有包含方法）

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

而函数看起来像这样：

$scope.formClicked = function($event){
    $log.debug('表单被点击');
    $event.preventDefault();
    $event.stopPropagation();
    $scope.model.shipDateOpened = false;
    $scope.model.cancelDateOpened = false;
};

问题是，现在在我的移动视图中，当我尝试点击选择下拉框时，会触发formClicked($event)函数，并且不会打开。这个问题有更好的解决方案，或者我是否可以在我的桌面视图中有条件地渲染一个ng-click？

0

1 答案

0 Comments

在IE浏览器中，点击Angular Bootstrap日期选择器之外的区域会引发“contains”错误。这个问题的原因是IE浏览器和Edge浏览器都没有实现Node.contains()方法。为了解决这个问题，可以使用一个polyfill来兼容这两个浏览器。

具体原因可以从以下代码中找到：

var documentClickBind = function(event) {
   var popup = $popup[0];
   var dpContainsTarget = element[0].contains(event.target);
   var popupContainsTarget = popup.contains !== undefined && popup.contains(event.target);
   if (scope.isOpen && !(dpContainsTarget || popupContainsTarget)) {
     scope.$apply(function() {
       scope.isOpen = false;
    });
  }
};

如代码中的注释所说，IE和Edge浏览器都不支持Node.contains()方法，这就导致了问题的发生。

解决方法是使用一个polyfill来实现Node.contains()方法。可以使用以下代码来实现这个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;
  }
}

这是一个稍微修改过的polyfill版本，最初是基于一个建议进行修改的。

非常感谢你提供了contains函数的实现！

0