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

fjcgreat 发布于2019-04-23 13:43 / 3342人阅读

摘要：电商站的首页，有一个需求是配一张大的图，然后指定某些区域是热区，点击之后跳转到不同的活动页。和就不能直接使用上面的例子，还需要做一定的修改，但是大同小异。这次出问题的地方就在这个标签。咳咳咳在中好使，是因为帮我们做了兼容。

电商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标签。
我们使用了模板来渲染页面，之后出来的元素大概是这样。

在chrome中可以正常点击，一旦到了其他浏览器，诸如FireFox，则无法点击。
同事问到我这个问题的时候，我真是觉得十分有趣，当时一起寻找是哪里的问题。
中间想了很多种可能，思路一直停留在动态计算影响了map的使用等。但是一直不能复现，后来仔细观察之后才发现，原来是img标签在书写的过程中，漏掉了usemap里的#。

咳咳咳……
在chrome中好使，是因为chrome帮我们做了兼容。

把这个bug记录下来，也算是长长记性。

PS：
后来我查了一下，之所以同事会出这个问题，也是因为map标签用的较少，而常用的label标签中的for属性，是不需要加#的，加上了反而会有错。
当然，label和map中的用法也不同，不论如何，引以为戒。
PPS：
下一篇写现在工作中用到的首页活动页布局方案。
PPPS：
520快乐！

GPU云服务器云服务器解析jpeg数据时的问题指定区域外打印指定区域 js打印指定区域

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2246.html

Flutter 开发实战与前景展望 - RTC Dev Meetup

摘要：稳定性中大部分异常是不会引起应用崩溃，更多会在上体现为红色错误堆栈，上异常等等。它是的实现类，实现跨帧保存的就是存放在这里，同时它也充当了和之间的桥梁。一整块的重绘区域，决定重绘的影响区域。手势在手势中引入了竞技的概念事件在中尤为重要。大家好，我是郭树煜，Github GSY 系列开源项目的作者，系列包括有 GSYVideoPlayer 、GSYGitGithubApp(FlutterRea...

_ipo 2019-05-27 17:43 评论0 收藏0
整理DOM事件相关知识点

摘要：事件相关内容当用户与浏览器发生的一些交互时如果希望去获得用户行为就需要借助事件来完成事件部分内容在中重要性不言而喻罗列需要了解与事件相关的知识如下这也是面试中遇到的问题事件的级别事件模型事件流事件处理程序描述事件捕获冒泡的具体流程对象常见的 DOM事件相关内容当用户与浏览器发生的一些交互时, 如果希望去获得用户行为, 就需要借助事件来完成. 事件部分内容在 JS中重要性不言而喻. ...

shenhualong 2019-08-02 15:26 评论0 收藏0
整理DOM事件相关知识点

摘要：事件相关内容当用户与浏览器发生的一些交互时如果希望去获得用户行为就需要借助事件来完成事件部分内容在中重要性不言而喻罗列需要了解与事件相关的知识如下这也是面试中遇到的问题事件的级别事件模型事件流事件处理程序描述事件捕获冒泡的具体流程对象常见的 DOM事件相关内容当用户与浏览器发生的一些交互时, 如果希望去获得用户行为, 就需要借助事件来完成. 事件部分内容在 JS中重要性不言而喻. ...

red_bricks 2019-08-23 18:25 评论0 收藏0
入门Leaflet之小Demo

入门 Leaflet 之小 Demo 写在前面 ---- WebGIS 开发基础之 Leaflet GIS 基本概念：GIS、Map、Layer、Feature、Geometry、Symbol、Data（Point、Polyline、Polygon）、Renderer、Scale、Project、Coordinates； GIS 开发概述：架构模式、常用平台和 SDK、二维三维使用 Lea...

Eminjannn 2019-08-22 15:23 评论0 收藏0