svg click事件失效（僅限edge瀏覽器）

potato1314發表於2019-02-16
SVG事件瀏覽器

1、重現問題:

<svg viewbox="0 0 16 16" class="svg-download">
  <use xlink:href="../content/img/icon.svg#svg-download"></use>
</svg>

如果直接在svg繫結click事件，在edge核心中是不靈敏的，在edge核心中只有點選svg邊緣部分才會觸發click事件

2、解決方法

<a href=`javascript:;`>
    <svg viewbox="0 0 16 16" class="svg-download" style=`pointer-events: none;`>
      <use xlink:href="../content/img/icon.svg#svg-download"></use>
    </svg>
</a>

然後在a標籤上繫結click事件即可。

3、關於pointer-events: none;介紹
pointer-events: none;

Note:如有更好的解決方案請大家一起分享噢

相關文章