SVG xlink、jQuery on 和 Safari/Internet Explorer - 单击 SVG 时未能传递单击事件答案

【问题标题】：SVG xlink, jQuery on and Safari/Internet Explorer - failing to pass the click event when the SVG is clickedSVG xlink、jQuery on 和 Safari/Internet Explorer - 单击 SVG 时未能传递单击事件
【发布时间】：2015-10-11 18:15:34
【问题描述】：

结合使用 jQuery .on()、SVG xlink 和 Internet Explorer / Safari，我似乎遇到了一个相当令人困惑的问题。

这里有一个简化的案例示例：http://codepen.io/mikehdt/pen/MwqORK

该示例有两个按钮；一个使用svg，另一个直接嵌入SVG代码。

SVG 和按钮是这样的（注意 .icons-svg 是第一个，因为如果您尝试 xlink 文档后面的内容，Safari 似乎会感到难过）：

<div class="icons-svg"><svg xmlns="http://www.w3.org/2000/svg"><symbol viewBox="0 0 1792 1792" id="icon-plus"><title>plus</title><path d="M1600 736v192q0 40-28 68t-68 28h-416v416q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-416h-416q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h416v-416q0-40 28-68t68-28h192q40 0 68 28t28 68v416h416q40 0 68 28t28 68z"></path></symbol></svg></div>

<a href="https://www.google.com" class="button">
  <span>Hey, what are you doing?</span>
  <svg class="icon icon-plus"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-plus"></use></svg>
</a>

<a href="https://www.google.com" class="button">
  <span>Hey, what are you doing?</span>
  <svg width="100%" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1600 736v192q0 40-28 68t-68 28h-416v416q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-416h-416q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h416v-416q0-40 28-68t68-28h192q40 0 68 28t28 68v416h416q40 0 68 28t28 68z"/></svg>
</a>

一些超基本的 CSS 只是为了美观：

.button {
  position: relative;
  display: inline-block;
  width: 100px;
  padding: 10px;

  background-color: #ccc;
}

.icon {
  width: 100%;
  fill: currentColor;
}

.icons-svg {
  display: none;
}

jQuery 使用 on，进行动态绑定，如下所示：

$(function(){
    $(document).on('click', '.button', function(event){
        event.preventDefault();

        alert('You clicked the button');
    });
});

应该会发生什么，就像在 Chrome 和 Firefox 中一样，如果您在使用 SVG 的链接中单击 +，则会弹出警报消息。但是，在 IE 和 Safari 中，它无法触发阻止事件并通过链接的脚本。

直接点击嵌入它的 SVG 可以按预期工作，但是为了良好的资产重用，这是一个不可行的解决方案。

行之有效的事情：

如果您不使用.on() 而是使用.click()，那么所有浏览器都可以工作，但是您会失去动态绑定。如果您使用.on() 但不使用xlink，则所有浏览器都可以使用。只有.on() 和xlink 的组合会导致出现此问题。

为什么要这样做？

当您想将 SVG 用于图标时，请将资源保持在外部（因此可缓存）并在您的网站上设置需要动态绑定的 Ajax 事件。

以前有没有其他人遇到过这种情况？你能让 IE 和 Safari 与这个组合很好地配合吗？这可能是浏览器或 jQuery 中的错误，还是 Chrome 和 Firefox 处理不正确的问题？

【问题讨论】：

标签： jquery internet-explorer svg safari xlink

【解决方案1】：

我也遇到了这个问题。即使在 SVG 标记周围使用常规锚点 (<a>)，所以没有 Javascript/jQuery。

我找到的解决方案是设置以下css：

pointer-events: none;

在svg 元素上。

这样，SVG 元素将不会捕获指针事件，它会冒泡，在这种情况下会冒泡到锚点，这将触发您的 jQuery。

我不知道您是否已经找到其他修复或解决方法？

【讨论】：