使用Map標簽指定點擊區域時的兼容性問題

fjcgreat 發布于2019-04-23 13:43 / 3345人閱讀

摘要：電商站的首頁，有一個需求是配一張大的圖，然后指定某些區域是熱區，點擊之后跳轉到不同的活動頁。和就不能直接使用上面的例子，還需要做一定的修改，但是大同小異。這次出問題的地方就在這個標簽。咳咳咳在中好使，是因為幫我們做了兼容。

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

{
    type: 1,
    width: 100,
    height: 100,
    clickArea: [
        {
            shape: "circle",
            coords: "10,10,10",
            href: "http://jd.com"
        },
        {
            shape: "rect",
            coords: "10,10,10,10",
            href: "http://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打印指定區域

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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