有没有办法在文本中获得imagemap风格的行为？

Question

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

现在，假设我在div中有一些文本，以等宽字体呈现，排列为2D网格。有没有办法在div上添加一些Javascript，这样如果我点击该网格中的任何字符，它会触发一个脚本并给它我点击的角色的索引？

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

Answer 1

Here's a jsfiddle that proves the concept and seems to work。每次单击都会在控制台上记录单击的字母的矩阵索引。 （它是从0开始的，列，行）

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

另见calculate text width with javascript。