Safari：<label>元素中的SVG似乎无法使用＆＃34;点击＆＃34;事件

Question

我有一个带有SVG元素的网站设计，用于＆＃34; fancy＆＃34;单选按钮和复选框。基本思想是实际的HTML元素被有效隐藏（移出可见页面，因为IE不喜欢实际隐藏的输入元素），然后将漂亮的SVG图标用于可见的交互元素。 / p>

问题是iOS上的Safari似乎没有传播＆＃34;点击＆＃34; SVG元素上的事件直到<label>包装器。所以我得到了：

<input type=checkbox class=not-visible id=foo>

然后

<label for=foo><svg>...</svg></label>

在所有桌面浏览器和Android上，运行正常。点击SVG图标会传播＆＃34;点击＆＃34;活动到<label>，这会导致＆＃34;点击＆＃34;在实际的复选框元素上。在Safari上，它不起作用。我尝试通过CSS将pointer-events属性设置为none，而有时有助于但并非总是如此。我无法弄清楚模式是什么。

想法？

编辑 - 我发现我遗漏了两个感兴趣的事实：

• 当<label>中的文字与SVG一起显示时，＆＃34;点击＆＃34;在移动Safari上正确合成事件以获取文本上的点击，但是SVG本身的点击不会发生;
• 我使用Fastclick库，这通常不会给我带来任何问题，但是没有理由不怀疑它可能与有关行为。

Answer 1

禁用Fastclick并确保我的<svg>元素采用

设置样式

pointer-events: none;

似乎让事情有效。我不是100％确定总是有效，但在我的测试用例中，我找不到任何不合用的复选框或单选按钮。