Safari：<label> 元素中的 SVG 似乎不适用于“点击”事件

Posted 2023-02-24

【中文标题】Safari：<label> 元素中的 SVG 似乎不适用于“点击”事件

【英文标题】：Safari: SVG in <label> elements don't seem to work with "click" events

【发布时间】：2017-10-08 21:28:52

【问题描述】：

我有一个带有 SVG 元素的网站设计，用于“花哨”的单选按钮和复选框。基本思想是实际的 html 元素被有效地隐藏（从可见页面移出，因为 IE 不喜欢实际隐藏输入元素），然后将漂亮的 SVG 图标用于可见的交互元素。

问题在于 ios 上的 Safari 似乎没有将 SVG 元素上的“点击”事件传播到 <label> 包装器。所以我有：

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

然后

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

在所有桌面浏览器和 android 上都可以正常工作。点击 SVG 图标会将“点击”事件传播到 <label>，这会导致实际复选框元素上的“点击”。在 Safari 上，它不起作用。我尝试通过 CSS 将 pointer-events 属性设置为 none，有时 会有所帮助，但并非总是如此。我一直无法弄清楚模式是什么。

想法？

edit — 我突然想到我遗漏了两个有趣的事实：

当 <label> 中存在文本以及 SVG 时，“点击”事件会在移动 Safari 上正确合成以点击文本，但点击 SVG 本身不会； 我正在使用 Fastclick 库，它通常不会给我带来问题，但没有理由不怀疑它可能与行为有关。

【问题讨论】：

这似乎是个愚蠢的想法，但尝试一下也无妨：如果为那个 SVG 设置 CSS cursor: pointer; 会发生什么？ （当然没有pointer-events: none;）

@GerardoFurtado 不是一个坏主意，但我已经这样做了（对于整个 <label>），并且光标确实正确地呈现为指针。请注意，当 <label> 还包含文本时，Safari 确实会正确创建“点击”事件。

对 SVG 执行此操作。我前段时间读到，如果 SVG 设置了光标样式，则单击只会在 iOS 中冒泡（不要问我为什么...）。

【参考方案1】：

禁用 Fastclick 并确保我的 <svg> 元素的样式使用

pointer-events: none;

似乎使事情顺利进行。我不能 100% 确定它总是有效，但在我的测试用例中，我找不到任何我喜欢的复选框或单选按钮不起作用。