javascript - 有没有办法在文本中获得图像映射样式的行为？

Question

还记得图像映射吗？他们在 90 年代到处都是。网页上会有一张图片，当你点击它时，它不仅可以根据图片，还可以根据你点击的确切像素采取一些行动。

现在，假设我在 div 中有一些文本，以等宽字体呈现，排列为 2D 网格。有什么方法可以在 div 上放置一些 Javascript，这样如果我单击该网格中的任何字符，它就会触发一个脚本并为其提供我单击的字符的索引？

我知道我可以通过使用自己的自定义标签围绕网格中的每个字符来强制执行此<a>操作，但是有没有更简单的方法可以做到这一点？

Answer 1

这是一个 jsfiddle，它证明了这个概念并且似乎有效。每次单击都会将单击的字母的矩阵索引记录到控制台。（它是基于 0 和列，行）

• 将您的文本放入等宽网格
• 将处理程序附加到包含元素的 onClick
• 使用只有 1 个字母的隐藏元素计算单个字母（例如“m”）的尺寸
• 除以单个字母的尺寸以获得您在文本中单击的字母的event.clientX坐标event.clientY

另请参阅使用 javascript 计算文本宽度。