成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

使用Map標(biāo)簽指定點(diǎn)擊區(qū)域時(shí)的兼容性問(wèn)題

fjcgreat / 3353人閱讀

摘要：電商站的首頁(yè)，有一個(gè)需求是配一張大的圖，然后指定某些區(qū)域是熱區(qū)，點(diǎn)擊之后跳轉(zhuǎn)到不同的活動(dòng)頁(yè)。和就不能直接使用上面的例子，還需要做一定的修改，但是大同小異。這次出問(wèn)題的地方就在這個(gè)標(biāo)簽。咳咳咳在中好使，是因?yàn)閹臀覀冏隽思嫒荨?/p>

電商m站的首頁(yè)，有一個(gè)需求是配一張大的banner圖，然后指定某些區(qū)域是熱區(qū)，點(diǎn)擊之后跳轉(zhuǎn)到不同的活動(dòng)頁(yè)。
聽(tīng)起來(lái)簡(jiǎn)單明了，實(shí)現(xiàn)也比較容易，立刻就想起來(lái)有個(gè)map標(biāo)簽，簡(jiǎn)直就是為這個(gè)需求量身定做。
簡(jiǎn)單說(shuō)下做法：
我們首先會(huì)和后臺(tái)約定一些規(guī)則，定義一個(gè)json對(duì)象。比如：

{
    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標(biāo)簽。之后按照我們約定的解析規(guī)則，把頁(yè)面渲染上去就好了。
當(dāng)然，實(shí)際上不會(huì)這么簡(jiǎn)單，一般來(lái)說(shuō)，我們的首頁(yè)和活動(dòng)頁(yè)是三端同步的。Android和iOS就不能直接使用上面的例子，還需要做一定的修改，但是大同小異。
這次出問(wèn)題的地方就在這個(gè)map標(biāo)簽。
我們使用了模板來(lái)渲染頁(yè)面，之后出來(lái)的元素大概是這樣。




  Sun
  Mercury
  Venus

在chrome中可以正常點(diǎn)擊，一旦到了其他瀏覽器，諸如FireFox，則無(wú)法點(diǎn)擊。
同事問(wèn)到我這個(gè)問(wèn)題的時(shí)候，我真是覺(jué)得十分有趣，當(dāng)時(shí)一起尋找是哪里的問(wèn)題。
中間想了很多種可能，思路一直停留在動(dòng)態(tài)計(jì)算影響了map的使用等。但是一直不能復(fù)現(xiàn)，后來(lái)仔細(xì)觀察之后才發(fā)現(xiàn)，原來(lái)是img標(biāo)簽在書(shū)寫(xiě)的過(guò)程中，漏掉了usemap里的#。

咳咳咳……
在chrome中好使，是因?yàn)閏hrome幫我們做了兼容。

把這個(gè)bug記錄下來(lái)，也算是長(zhǎng)長(zhǎng)記性。

PS：
后來(lái)我查了一下，之所以同事會(huì)出這個(gè)問(wèn)題，也是因?yàn)閙ap標(biāo)簽用的較少，而常用的label標(biāo)簽中的for屬性，是不需要加#的，加上了反而會(huì)有錯(cuò)。
當(dāng)然，label和map中的用法也不同，不論如何，引以為戒。
PPS：
下一篇寫(xiě)現(xiàn)在工作中用到的首頁(yè)活動(dòng)頁(yè)布局方案。
PPPS：
520快樂(lè)！

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/2246.html

相關(guān)文章

  • Flutter 開(kāi)發(fā)實(shí)戰(zhàn)與前景展望 - RTC Dev Meetup

    摘要：穩(wěn)定性中大部分異常是不會(huì)引起應(yīng)用崩潰，更多會(huì)在上體現(xiàn)為紅色錯(cuò)誤堆棧，上異常等等。它是的實(shí)現(xiàn)類，實(shí)現(xiàn)跨幀保存的就是存放在這里，同時(shí)它也充當(dāng)了和之間的橋梁。一整塊的重繪區(qū)域，決定重繪的影響區(qū)域。手勢(shì)在手勢(shì)中引入了競(jìng)技的概念事件在中尤為重要。大家好，我是郭樹(shù)煜，Github GSY 系列開(kāi)源項(xiàng)目的作者，系列包括有 GSYVideoPlayer 、GSYGitGithubApp(FlutterRea...

    _ipo 評(píng)論0 收藏0

  • 整理DOM事件相關(guān)知識(shí)點(diǎn)

    摘要：事件相關(guān)內(nèi)容當(dāng)用戶與瀏覽器發(fā)生的一些交互時(shí)如果希望去獲得用戶行為就需要借助事件來(lái)完成事件部分內(nèi)容在中重要性不言而喻羅列需要了解與事件相關(guān)的知識(shí)如下這也是面試中遇到的問(wèn)題事件的級(jí)別事件模型事件流事件處理程序描述事件捕獲冒泡的具體流程對(duì)象常見(jiàn)的 DOM事件相關(guān)內(nèi)容 當(dāng)用戶與瀏覽器發(fā)生的一些交互時(shí), 如果希望去獲得用戶行為, 就需要借助事件來(lái)完成. 事件部分內(nèi)容在 JS中重要性不言而喻. ...

    shenhualong 評(píng)論0 收藏0

  • 整理DOM事件相關(guān)知識(shí)點(diǎn)

    摘要：事件相關(guān)內(nèi)容當(dāng)用戶與瀏覽器發(fā)生的一些交互時(shí)如果希望去獲得用戶行為就需要借助事件來(lái)完成事件部分內(nèi)容在中重要性不言而喻羅列需要了解與事件相關(guān)的知識(shí)如下這也是面試中遇到的問(wèn)題事件的級(jí)別事件模型事件流事件處理程序描述事件捕獲冒泡的具體流程對(duì)象常見(jiàn)的 DOM事件相關(guān)內(nèi)容 當(dāng)用戶與瀏覽器發(fā)生的一些交互時(shí), 如果希望去獲得用戶行為, 就需要借助事件來(lái)完成. 事件部分內(nèi)容在 JS中重要性不言而喻. ...

    red_bricks 評(píng)論0 收藏0

  • 入門(mén)Leaflet之小Demo

    入門(mén) Leaflet 之小 Demo 寫(xiě)在前面 ---- WebGIS 開(kāi)發(fā)基礎(chǔ)之 Leaflet GIS 基本概念：GIS、Map、Layer、Feature、Geometry、Symbol、Data（Point、Polyline、Polygon）、Renderer、Scale、Project、Coordinates； GIS 開(kāi)發(fā)概述：架構(gòu)模式、常用平臺(tái)和 SDK、二維三維 使用 Lea...

    Eminjannn 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<