使用Map標籤指定點選區域時的相容性問題

liuyongjia發表於2018-05-20

電商m站的首頁，有一個需求是配一張大的banner圖，然後指定某些區域是熱區，點選之後跳轉到不同的活動頁。
聽起來簡單明瞭，實現也比較容易，立刻就想起來有個map標籤，簡直就是為這個需求量身定做。
簡單說下做法：
我們首先會和後臺約定一些規則，定義一個json物件。比如：

{
    type: 1,
    width: 100,
    height: 100,
    clickArea: [
        {
            shape: `circle`,
            coords: `10,10,10`,
            href: `//jd.com`
        },
        {
            shape: `rect`,
            coords: `10,10,10,10`,
            href: `//m.jd.com`
        }
    ],
    img: `一張圖片.jpg`
}

我們可以約定，type為1就是map標籤。之後按照我們約定的解析規則，把頁面渲染上去就好了。
當然，實際上不會這麼簡單，一般來說，我們的首頁和活動頁是三端同步的。Android和iOS就不能直接使用上面的例子，還需要做一定的修改，但是大同小異。
這次出問題的地方就在這個map標籤。
我們使用了模板來渲染頁面，之後出來的元素大概是這樣。

<img src ="planets.gif" alt="Planets" usemap ="#planetmap" />

<map name="planetmap">
  <area shape="rect" coords="0,0,110,260" href="sun.htm" alt="Sun" />
  <area shape="circle" coords="129,161,10" href="mercur.htm" alt="Mercury" />
  <area shape="circle" coords="180,139,14" href="venus.htm" alt="Venus" />
</map>

在chrome中可以正常點選，一旦到了其他瀏覽器，諸如FireFox，則無法點選。
同事問到我這個問題的時候，我真是覺得十分有趣，當時一起尋找是哪裡的問題。
中間想了很多種可能，思路一直停留在動態計算影響了map的使用等。但是一直不能復現，後來仔細觀察之後才發現，原來是img標籤在書寫的過程中，漏掉了usemap裡的#。

咳咳咳……
在chrome中好使，是因為chrome幫我們做了相容。

把這個bug記錄下來，也算是長長記性。

PS：
後來我查了一下，之所以同事會出這個問題，也是因為map標籤用的較少，而常用的label標籤中的for屬性，是不需要加#的，加上了反而會有錯。
當然，label和map中的用法也不同，不論如何，引以為戒。
PPS：
下一篇寫現在工作中用到的首頁活動頁佈局方案。
PPPS：
520快樂！

相關文章