資訊專欄INFORMATION COLUMN
摘要：電商站的首頁，有一個需求是配一張大的圖，然后指定某些區(qū)域是熱區(qū)，點擊之后跳轉(zhuǎn)到不同的活動頁。和就不能直接使用上面的例子，還需要做一定的修改，但是大同小異。這次出問題的地方就在這個標簽?？瓤瓤仍谥泻檬梗且驗閹臀覀冏隽思嫒?。
電商m站的首頁，有一個需求是配一張大的banner圖，然后指定某些區(qū)域是熱區(qū)，點擊之后跳轉(zhuǎn)到不同的活動頁。
聽起來簡單明了，實現(xiàn)也比較容易，立刻就想起來有個map標簽，簡直就是為這個需求量身定做。
簡單說下做法：
我們首先會和后臺約定一些規(guī)則，定義一個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標簽。之后按照我們約定的解析規(guī)則，把頁面渲染上去就好了。
當然，實際上不會這么簡單，一般來說，我們的首頁和活動頁是三端同步的。Android和iOS就不能直接使用上面的例子，還需要做一定的修改，但是大同小異。
這次出問題的地方就在這個map標簽。
我們使用了模板來渲染頁面，之后出來的元素大概是這樣。
在chrome中可以正常點擊，一旦到了其他瀏覽器，諸如FireFox，則無法點擊。
同事問到我這個問題的時候，我真是覺得十分有趣，當時一起尋找是哪里的問題。
中間想了很多種可能，思路一直停留在動態(tài)計算影響了map的使用等。但是一直不能復現(xiàn)，后來仔細觀察之后才發(fā)現(xiàn)，原來是img標簽在書寫的過程中，漏掉了usemap里的#。
咳咳咳……
在chrome中好使，是因為chrome幫我們做了兼容。
把這個bug記錄下來，也算是長長記性。
PS：
后來我查了一下，之所以同事會出這個問題，也是因為map標簽用的較少，而常用的label標簽中的for屬性，是不需要加#的，加上了反而會有錯。
當然，label和map中的用法也不同，不論如何，引以為戒。
PPS：
下一篇寫現(xiàn)在工作中用到的首頁活動頁布局方案。
PPPS：
520快樂！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/2246.html
摘要：穩(wěn)定性中大部分異常是不會引起應(yīng)用崩潰，更多會在上體現(xiàn)為紅色錯誤堆棧，上異常等等。它是的實現(xiàn)類，實現(xiàn)跨幀保存的就是存放在這里，同時它也充當了和之間的橋梁。一整塊的重繪區(qū)域，決定重繪的影響區(qū)域。手勢在手勢中引入了競技的概念事件在中尤為重要。大家好，我是郭樹煜，Github GSY 系列開源項目的作者，系列包括有 GSYVideoPlayer 、GSYGitGithubApp(FlutterRea...
摘要：事件相關(guān)內(nèi)容當用戶與瀏覽器發(fā)生的一些交互時如果希望去獲得用戶行為就需要借助事件來完成事件部分內(nèi)容在中重要性不言而喻羅列需要了解與事件相關(guān)的知識如下這也是面試中遇到的問題事件的級別事件模型事件流事件處理程序描述事件捕獲冒泡的具體流程對象常見的 DOM事件相關(guān)內(nèi)容 當用戶與瀏覽器發(fā)生的一些交互時, 如果希望去獲得用戶行為, 就需要借助事件來完成. 事件部分內(nèi)容在 JS中重要性不言而喻. ...
摘要：事件相關(guān)內(nèi)容當用戶與瀏覽器發(fā)生的一些交互時如果希望去獲得用戶行為就需要借助事件來完成事件部分內(nèi)容在中重要性不言而喻羅列需要了解與事件相關(guān)的知識如下這也是面試中遇到的問題事件的級別事件模型事件流事件處理程序描述事件捕獲冒泡的具體流程對象常見的 DOM事件相關(guān)內(nèi)容 當用戶與瀏覽器發(fā)生的一些交互時, 如果希望去獲得用戶行為, 就需要借助事件來完成. 事件部分內(nèi)容在 JS中重要性不言而喻. ...
入門 Leaflet 之小 Demo 寫在前面 ---- WebGIS 開發(fā)基礎(chǔ)之 Leaflet GIS 基本概念：GIS、Map、Layer、Feature、Geometry、Symbol、Data（Point、Polyline、Polygon）、Renderer、Scale、Project、Coordinates； GIS 開發(fā)概述：架構(gòu)模式、常用平臺和 SDK、二維三維 使用 Lea...
閱讀 739·2021-10-09 09:41
閱讀 730·2019-08-30 15:53
閱讀 1164·2019-08-30 15:53
閱讀 1292·2019-08-30 11:01
閱讀 1658·2019-08-29 17:31
閱讀 1087·2019-08-29 14:05
閱讀 1815·2019-08-29 12:49
閱讀 491·2019-08-28 18:17
