jquery - 浏览器之间的 SVG 单击事件处理有何不同？

Question

我注意到浏览器的行为在实现和操作系统之间非常不一致。

例如，当有一个带有链接的图标时，

<a href="faq.html" class="icn icn-faq">
    <svg version="1.1" role="img" aria-label="FAQ">
        <use xlink:href="/images/icons.svg#faq" />
    </svg>
</a>

无论点击哪里，它都有效。但是，如果我添加一个(基于 jQuery 的)灯箱 jQuery('a.icn-faq').fancybox({"content": "wat?"})，浏览器行为开始不同。单击 SVG 上的任意位置会导致灯箱出现在除 Safari 之外的所有浏览器中，Safari 仅在没有点击 path 时才有效。

我知道我可以通过 adding a transparent rect 解决这个问题，这再次为我提供了一致的浏览器行为。

<a href="faq.html" class="icn icn-faq">
    <svg version="1.1" role="img" aria-label="FAQ">
        <use xlink:href="/images/icons.svg#faq" />
        <rect width="100%" height="100%" fill="#fff" fill-opacity="0" />
    </svg>
</a>

我也知道 pointer-events .为 SVG 设置 pointer-events: none 会中断 OS X 上的点击事件，但似乎不会影响 Linux 浏览器

我不了解它们是如何组合在一起的。造成这些差异的基本原理是什么？

Answer 1

这个问题没有简单的答案，只是浏览器中存在不同程度的错误(尽管现在大多数情况下都有效)。

fancybox 行为似乎是由 jQuery bug 引起的这只发生在某些浏览器中。它可以用一个简单的 pointer-events: none 来修复。

详细了解行为并没有多大用处。了解如何解决这些问题很有用(添加问题中显示的图像填充路径)。其余的是浏览器实现细节，对大多数人来说不值得为此痛苦。