vue中，svg图标添加click事件，部分浏览器不生效

Posted 2020-11-30 lemoncool

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue中，svg图标添加click事件，部分浏览器不生效相关的知识，希望对你有一定的参考价值。

vue项目中，使用svg图标，但是发现，为svg图标绑定click事件时，部分浏览器会出现，点击没有反应的情况，代码如下：

<icon name="icon_add"  @click="addSubject(scope.$index)">
</icon>

后来发现，在edge内核中只有点击svg边缘部分才会触发click事件

所以解决办法如下：为svg图标外面包裹一层元素，click事件绑定在外侧元素上

<a href=‘javascript:;‘ @click="addSubject(scope.$index)">
    <icon name="icon_add">
    </icon>
</a>

以上是关于vue中，svg图标添加click事件，部分浏览器不生效的主要内容，如果未能解决你的问题，请参考以下文章