使用Map标签指定点击区域时的兼容性问题

Posted 2020-11-07 Get up!

电商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快乐！