有沒有辦法在文本中獲取映像式樣行爲？

Question

還記得imagemaps？他們在90年代到處都是。一個網頁上會有一個圖像，當你點擊它時，它可能會根據圖像而採取一些行動，而不僅僅是你點擊的確切像素。

現在，假設我在div中有一些文本，以等寬字體呈現，並排列爲2D網格。有沒有什麼辦法可以在div上添加一些Javascript，這樣如果我點擊該網格中的任何字符，它會觸發一個腳本，並將它指向我點擊的字符的索引？

我知道我可以用自己定製的<a>標籤包圍網格中的每個單獨字符，但有沒有更簡單的方法來實現它呢？

Answer 1

Here's a jsfiddle that proves the concept and seems to work。每次點擊都會在控制檯上記錄所點擊字母的矩陣索引。 （這是基於0和列，行）

• 把你的文字變成等寬電網
• 附加處理程序的的onClick包含元素
• 計算一個單個字母的尺寸（如「一個字母的尺寸使用一個隱藏的元素只有1個字母
• 鴻溝event.clientX和event.clientY米「），讓您的文字在您點擊信件的座標

另請參閱calculate text width with javascript。