通过Canvas（鼠标事件）操作DOM元素的最佳实践是什么？

Question

我正在使用Canvas（和CreateJS）创建一个交互式地图。由于以下几个原因，我希望在DOM中添加标记：

• CSS悬停样式
• 客户应该能够在CMS中添加标记，因此它将显示在HTML模板中。
• 我想使用数据属性将内容链接到每个标记，单击标记后内容会显示出来。将元素链接到内容/数据可以很容易地用JavaScript实现，因此我可以放开这一点。但是出于SEO目的，我更喜欢将其保留在DOM中。

<div class="container">
    <div class="zoom zoom-in" onclick="zoomIn()"></div>
    <div class="zoom zoom-out" onclick="zoomOut()"></div>
    <div class="marker"></div>
    <canvas id="tree" width="1500" height="1000"></canvas>
</div>

在这里您可以看到我的HTML的结构。用户可以平移作为Canvas元素的地图背景。也可以选择缩放。我希望标记的坐标适应这些交互。坐标由CSS变换设置。

请给我一些有关如何保持最佳表现的提示。 欢迎每一个提示！

预先感谢！