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

电商m站的首页,有一个需求是配一张大的banner图,然后指定某些区域是热区,点击之后跳转到不同的活动页。听起来简单明了,实现也比较容易,立刻就想起来有个map标签,简直就是为这个需求量身定做。简单说下做法:我们首先会和后台约定一些规则,定义一个json对象。比如:{type: 1,width: 100,height: 100,clickArea: [{sh

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

电商m站的首页,有一个需求是配一张大的banner图,然后指定某些区域是热区,点击之后跳转到不同的活动页。听起来简单明了,实现也比较容易,立刻就想起来有个map标签,简直就是为这个需求量身定做。

使用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中的用法也不同,不论如何,引以为戒。

来源:https://www.cnblogs.com/liuyongjia/archive/2018/05/20/9064414.html

海计划公众号
(0)
上一篇 2020/04/05 01:45
下一篇 2020/04/05 01:45

您可能感兴趣的内容

  • 互联网前端现在这么多人,做前端还有出路吗?使用帮助_前端教程视频

    前端能不能一直做,做前端能走多远?以后前端领域会不会被其他新的技术取代?又或者是面临着前端行业的萎缩,导致自己的失业?所有很多人对前端产生了一种“所谓的认为”:前端不能一直做下去。说实话,一开始步入前端的我也是这么觉得呢,但当你真正的了解了前端的这个行业,你就会明白前端真的值得你去做,值得你去付出,因为前端行业应急渗入到了各方面,可说前端行业的生命力非常的强

    2020/04/03
  • JSON Web 令牌(JWT)是如何保护 API 的?小白攻略_api小白攻略

    你可以已经听说过 JSON Web Token (JWT) 是目前用于保护 API 的最新技术。与大多数安全主题一样,如果你打算使用它,那很有必要去了解它的工作原理(一定程度上)。问题在于,对 JWT 的大多数解释都是技术性的,这一点让人很头疼。让我们看下,我能否解释清楚 JWT 是如何在不引起你的注意下保护您的 API !API 验证某些 API 资源需要

    2020/03/20
  • 程序员修复一个bug的心路历程,太形象了攻略教程_bug使用攻略

    和你们一样,我也是一个普普通通的前端开发者,在日常工作中,大部分时间不是在写新代码,而是在改代码,或是需求被改了,或是报bug了。当别人想我们报一个bug,直到我们把bug完整的修复好,整个过程是一个怎样的经历?下面用一个电灯维修工的故事类比一下,相信会引起很多开发者共鸣:假如你是一个电灯维修工程师。一天晚上,有人想你反馈了一个bug:“18楼会议室的灯亮着

    2020/04/03
  • flexbugs攻略教程_社区驱动的Flexbox问题列表和跨浏览器的解决方法

    flexbugs攻略教程 GitHub:https://github.com/philipwalton/flexbugs 简介描述:社区驱动的Flexbox问题列表和跨浏览器的解决…

    2020/03/10
  • 如何快速脱单呢?基础知识入门_福利使用攻略

    总有人说:我也想谈恋爱,可是我没有男/女朋友啊!那么问题来了,究竟该怎样快速脱单?小编为大家整理了一些快速脱单的方法,快速行动起来吧!第一招:抢着付钱​​ 天底下还有什么比“给你结账的男票”更诱人的呢? 相信每个女生都喜欢,这样给女方的印象会加分。但是,如果妹纸只是因为买买买找你,那你就可以把她拒之门外了,我们不需要这种爱慕虚荣的女朋友!第二招:找

    2020/03/23
  • AlloyCrop小白知识_做最好且最小的移动裁剪组件

    AlloyCrop小白知识 官方网址:https://alloyteam.github.io/AlloyCrop/ GitHub:https://github.com/AlloyT…

    2020/03/10
  • Sequence.js攻略教程_一个非常现代的图片滑动插件

    Sequence.js攻略教程 官方网址:http://sequencejs.com GitHub:https://github.com/IanLunn/Sequence 简介描述…

    2020/03/10
  • Principle入门指南_一款交互设计工具

    Principle入门指南 官方网址:http://principleformac.com/ 简介描述:一款交互设计工具 Principle是前 Apple 工程师打造的一款交互设…

    2020/03/06
  • 对技术人想做自由职业的一些想法基础入门_职业小白入门

    最近几个朋友都跟我聊到想要辞职自己做事情,有程序员,也有设计师,还有广告行业的朋友。 我之前在V2EX上也回答过类似的帖子,最近和他们交流后,我还是想谈一谈我的一些想法,一些我对自由职业的理解。这些朋友都有一个共同点,他们都是靠自身技术吃饭的,在办公室里完成自己的工作,然后每个月拿一份还不错的薪水。重复性的工作、无聊的业务、没有挑战的工作等等因素,让他们不想

    2020/03/24
  • vue轮播图指南攻略用vue实现一个仿简书的轮播图_轮播小白基础

    先展示最终效果:解决思路:Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果。写好css样式,只需改变每张图片的class即可实现轮播效果。可以将轮播图看成两个,如图所示:代码实现:各个slide的样式: $width: 800px; // 容器宽度
    $height: 300px; // 容器高度
    $bW

    2020/04/05
  • h5手机摇一摇功能实现:基于html5重力感应DeviceMotionEvent事件监听手机摇晃入门教程_h5使用帮助

    DeviceMotionEvent事件:DeviceMotionEven是html5提供的一个用来获取设备物理方向及运动的信息(比如陀螺仪、罗盘及加速计)的Dom事件,事件描述如下:deviceorientation:提供设备的物理方向信息,表示为一系列本地坐标系的旋角。devicemotion:提供设备的加速信息,表示为定义在设备上的坐标系中的卡尔迪坐标。

    2020/04/05
  • javascript中object是什么?基础知识教程_object小白指南

    object是javascript中一个被我们经常使用的数据类型,而且JS中的所有对象都是继承自Object对象的。下面本篇文章就来给大家简单介绍一下javascript中的Object类型,希望对大家有所帮助。Object类型ECMAScript中的对象其实就是一组数据和功能的集合。通过new操作符后跟要创建的对象类型的名称来创建。//创建一个Object

    2020/03/22
  • javascript如何判断是否获得焦点?入门百科_焦点指南教程

    JavaScript中可以使用document.activeElement判断某一元素是否获取焦点。或使用hasFocus()方法检测文档内任一元素是否获取焦点。1、javascript如何判断是否获得焦点的方法:JavaScript判断一个文本框是否获得焦点:// 可以用document.activeElement判断
    // document.active

    2020/03/20
  • Quicker基础知识教程_基于鼠标操控的效率神器

    Quicker基础知识教程 官方网址:https://getquicker.net/ 简介描述:基于鼠标操控的效率神器 「Quicker」是一款把鼠标的操控能力提高到极致的效率型工…

    2020/03/10
  • 时间复杂度与空间复杂度分析小白常识_开发基础入门

    作为开发人员,我们都希望在完成功能的基础上让代码运行的更快、更省空间,那如何衡量编写的代码是否更有效率,这就需要我们学会如何分析代码时间复杂度和空间复杂度.什么是复杂度分析执行时间和占用空间是代码性能的2个评判标准,我们分别用时间复杂度和空间复杂度去描述这2个标准,二者统称复杂度,复杂度描述的是算法执行时间(或占用空间)随数据规模的增长关系.为什么需要复杂度

    2020/03/31
  • Js数组中所有方法(超详细)小白攻略_数组入门百科

    1、concat()把元素衔接到数组中。例子:var str1 = “Hello “;
    var str2 = “world!”;
    var n = str1.concat(str2);
    Hello world! 输出结果2 every() 方法使用指定函数检测数组中的所有元素:如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元

    2020/03/23