javascript - IE/Edge 单击 SVG 导致错误 - TypeError : Object doesn't support property or method 'blur'

Question

我正在使用一个 Angular 组件( Angular UI 分页，虽然我不认为这是问题的原因)，我的模板包括以下内容......

<my-button ng-click="selectPage(totalPages, $event)">
    <svg>
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="domain.com/scgSprite.svg#arrow"></use>
    </svg>
</my-button>

问题是在 MS Edge 和 IE(但不是 chrome)中单击按钮时出现以下错误。

类型错误:对象不支持属性或方法'blur'

当我点击按钮但在没有图标的边缘时不会发生。我必须实际单击按钮上的 SVG 元素才能收到错误消息。

我们将不胜感激任何帮助。

编辑:

从那以后我发现导致错误的 angular-ui 库中的行是这些...

if (evt && evt.target) {
    evt.target.blur();
}

我不想编辑库，因为那样我以后就无法将它更新到较新的版本。

我是否可以将 .blur() 函数添加到 MS 浏览器中的 svg 元素？

Answer 1

这解决了问题

if (typeof SVGElement.prototype.blur == 'undefined') {
    SVGElement.prototype.blur = function(){};
}