IE/Edge click on SVG causes error - 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）单击按钮时出现以下错误。

TypeError: 对象不支持属性或方法 '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(){};
}

IE/Edge click on SVG causes error - TypeError: Object doesn't support property or method 'blur'

IE/Edge click on SVG causes error - TypeError: Object doesn't support property or method 'blur'

javascript

internet-explorer

svg

angularjs

microsoft-edge