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

问题

I'm using an angular component (Angular UI pagination, although I don't think it's the cause of the problem), and my template includes the following...

<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>

The problem is that in MS Edge and IE (but not chrome) I get the following error when clicking the button.

TypeError: Object doesn't support property or method 'blur'

It doesn't happen when I click on the button but on the edge where there is no icon. I have to actually click the SVG element on the button to get the error.

Any help would really be appreciated.

EDIT:

I have since found out that the lines in the angular-ui library that is causing the error are these...

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

I don't want to edit the library because then I won't be able to update it to newer versions in the future.

Is there a possibility I could add the .blur() function to svg elements in MS browsers?

回答1:

This fixed the problem

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

来源：https://stackoverflow.com/questions/38648098/ie-edge-click-on-svg-causes-error-typeerror-object-doesnt-support-property-o