1

.on()结合使用 jQuery 、 SVGxlink和 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 处理不正确的问题？

4

1 回答 1

0

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

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

pointer-events: none;

在svg元素上。

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

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

于 2016-11-25T07:27:16.430 回答