0

我有一个带有矩形子元素的 SVG。rect 子对象有一个onclick事件，该事件通过其 ID 获取另一个元素并更改其背景颜色。这适用于我桌面上的 Chrome 以及 Chrome 检查器中的 iOS 模拟器。但是，它不会在 iOS 设备上触发事件。

我可以在我的代码中进行哪些更改以在桌面和 iOS 设备上工作？我应该收听其他事件吗？

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="height: 200px; width: 200px; border: 4px dashed salmon;">
    <rect x="25" y="25" height="50" width="50" style="cursor: pointer; fill: gold;" onclick="getElementById('box').style.backgroundColor = 'gold';"></rect>
</svg>
<div id="box" style="height: 200px; width: 200px; background-color: skyblue;"></div>

这是一个CodePen。

4

3 回答 3

1

是的，不幸的是，iOS 中有一个错误——“点击”和“点击”事件在 svg 标签中不起作用。

但是您可以使用“touchstart”/“touchend”事件——它们在带有 svg 的 iOS 中运行良好。

您可以模拟“点击”事件： https ://stackoverflow.com/a/32120668/3265404

于 2019-12-03T17:13:20.413 回答
0

我在 iOS 上的 Chrome 上遇到了这个问题，发现cursor: pointer;在 svg 元素上使用它可以工作。

来源：https ://github.com/meteor/meteor/issues/681#issuecomment-351443900

于 2020-01-21T16:56:05.777 回答
0

您必须getElementById()作为document显式方法调用：

onclick="document.getElementById('box').style.backgroundColor = 'gold';"
于 2019-03-28T01:28:45.533 回答